From 612926b39847db19ab9cd95824053c4af7fca586 Mon Sep 17 00:00:00 2001
From: skrustev <striker18@mail.bg>
Date: Mon, 10 Feb 2025 18:32:03 +0200
Subject: [PATCH] Update package.json and webpack to reflect wc version and
 babel plugins.

---
 browser/tasks/gulp-samples.js                 |  24 +--
 browser/templates/sample/package.json         |  22 +--
 package-lock.json                             | 181 +++++++++---------
 package.json                                  |  24 +--
 .../annotations-all/package.json              |  11 +-
 .../annotations-all/webpack.config.js         |   6 +-
 .../annotations-callouts/package.json         |  11 +-
 .../annotations-callouts/webpack.config.js    |   6 +-
 .../annotations-crosshairs/package.json       |  11 +-
 .../annotations-crosshairs/webpack.config.js  |   6 +-
 .../annotations-custom/package.json           |  11 +-
 .../annotations-custom/webpack.config.js      |   6 +-
 .../annotations-final-value/package.json      |  11 +-
 .../annotations-final-value/webpack.config.js |   6 +-
 .../annotations-highlighting/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../category-chart/annotations/package.json   |   7 +-
 .../annotations/webpack.config.js             |   6 +-
 .../area-chart-multiple-sources/package.json  |   7 +-
 .../webpack.config.js                         |   6 +-
 .../area-chart-single-source/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../area-chart-styling/package.json           |   7 +-
 .../area-chart-styling/webpack.config.js      |   6 +-
 .../category-chart/axis-gap/package.json      |  11 +-
 .../category-chart/axis-gap/webpack.config.js |   6 +-
 .../axis-gridlines/package.json               |  11 +-
 .../axis-gridlines/webpack.config.js          |   6 +-
 .../category-chart/axis-inverted/package.json |  11 +-
 .../axis-inverted/webpack.config.js           |   6 +-
 .../category-chart/axis-labels/package.json   |  11 +-
 .../axis-labels/webpack.config.js             |   6 +-
 .../axis-locations/package.json               |  11 +-
 .../axis-locations/webpack.config.js          |   6 +-
 .../category-chart/axis-options/package.json  |   7 +-
 .../axis-options/webpack.config.js            |   6 +-
 .../category-chart/axis-overlap/package.json  |  11 +-
 .../axis-overlap/webpack.config.js            |   6 +-
 .../category-chart/axis-range/package.json    |  11 +-
 .../axis-range/webpack.config.js              |   6 +-
 .../axis-tickmarks/package.json               |  11 +-
 .../axis-tickmarks/webpack.config.js          |   6 +-
 .../category-chart/axis-titles/package.json   |   7 +-
 .../axis-titles/webpack.config.js             |   6 +-
 .../chart-highlight-filter/package.json       |  11 +-
 .../chart-highlight-filter/webpack.config.js  |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../column-chart-single-source/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../column-chart-styling/package.json         |   7 +-
 .../column-chart-styling/webpack.config.js    |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../column-chart-with-tooltips/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../custom-selection/package.json             |   7 +-
 .../custom-selection/webpack.config.js        |   6 +-
 .../data-aggregations/package.json            |  11 +-
 .../data-aggregations/webpack.config.js       |   6 +-
 .../category-chart/data-filter/package.json   |  11 +-
 .../data-filter/webpack.config.js             |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../category-chart/data-legend/package.json   |   7 +-
 .../data-legend/webpack.config.js             |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-tooltip-positioning/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../category-chart/data-tooltip/package.json  |   7 +-
 .../data-tooltip/webpack.config.js            |   6 +-
 .../format-specifiers/package.json            |  11 +-
 .../format-specifiers/webpack.config.js       |   6 +-
 .../high-frequency/package.json               |   7 +-
 .../high-frequency/webpack.config.js          |   6 +-
 .../category-chart/high-volume/package.json   |   7 +-
 .../high-volume/webpack.config.js             |   6 +-
 .../highlighting-behavior/package.json        |  11 +-
 .../highlighting-behavior/webpack.config.js   |   6 +-
 .../highlighting-mode/package.json            |  11 +-
 .../highlighting-mode/webpack.config.js       |   6 +-
 .../category-chart/highlighting/package.json  |   7 +-
 .../highlighting/webpack.config.js            |   6 +-
 .../legend-highlighting/package.json          |   7 +-
 .../legend-highlighting/webpack.config.js     |   6 +-
 .../line-chart-multiple-sources/package.json  |   7 +-
 .../webpack.config.js                         |   6 +-
 .../line-chart-single-source/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../line-chart-styling/package.json           |   7 +-
 .../line-chart-styling/webpack.config.js      |   6 +-
 .../line-chart-with-animations/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../line-chart-with-annotations/package.json  |   7 +-
 .../webpack.config.js                         |   6 +-
 .../marker-options/package.json               |  11 +-
 .../marker-options/webpack.config.js          |   6 +-
 .../marker-templates/package.json             |   7 +-
 .../marker-templates/webpack.config.js        |   6 +-
 .../category-chart/overview/package.json      |   7 +-
 .../category-chart/overview/webpack.config.js |   6 +-
 .../point-chart-multiple-sources/package.json |   7 +-
 .../webpack.config.js                         |   6 +-
 .../point-chart-single-source/package.json    |   7 +-
 .../webpack.config.js                         |   6 +-
 .../point-chart-styling/package.json          |   7 +-
 .../point-chart-styling/webpack.config.js     |   6 +-
 .../selection-modes/package.json              |   7 +-
 .../selection-modes/webpack.config.js         |   6 +-
 .../selection-multiple-modes/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../spline-area-multiple-sources/package.json |   7 +-
 .../webpack.config.js                         |   6 +-
 .../spline-area-single-source/package.json    |   7 +-
 .../webpack.config.js                         |   6 +-
 .../spline-area-styling/package.json          |   7 +-
 .../spline-area-styling/webpack.config.js     |   6 +-
 .../spline-multiple-sources/package.json      |   7 +-
 .../spline-multiple-sources/webpack.config.js |   6 +-
 .../spline-single-source/package.json         |   7 +-
 .../spline-single-source/webpack.config.js    |   6 +-
 .../spline-styling/package.json               |   7 +-
 .../spline-styling/webpack.config.js          |   6 +-
 .../category-chart/stack-columns/package.json |   7 +-
 .../stack-columns/webpack.config.js           |   6 +-
 .../step-area-multiple-sources/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../step-area-single-source/package.json      |   7 +-
 .../step-area-single-source/webpack.config.js |   6 +-
 .../step-area-styling/package.json            |   7 +-
 .../step-area-styling/webpack.config.js       |   6 +-
 .../step-line-multiple-sources/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../step-line-single-source/package.json      |   7 +-
 .../step-line-single-source/webpack.config.js |   6 +-
 .../step-line-styling/package.json            |   7 +-
 .../step-line-styling/webpack.config.js       |   6 +-
 .../tooltip-template/package.json             |   7 +-
 .../tooltip-template/webpack.config.js        |   6 +-
 .../category-chart/tooltip-types/package.json |   7 +-
 .../tooltip-types/webpack.config.js           |   6 +-
 .../category-chart/trendline/package.json     |   7 +-
 .../trendline/webpack.config.js               |   6 +-
 .../category-chart/value-lines/package.json   |  11 +-
 .../value-lines/webpack.config.js             |   6 +-
 .../chart-dashboard/package.json              |  19 +-
 .../chart-dashboard/webpack.config.js         |   6 +-
 .../financial-dashboard/package.json          |  19 +-
 .../financial-dashboard/webpack.config.js     |   6 +-
 .../gauge-dashboard/package.json              |  19 +-
 .../gauge-dashboard/webpack.config.js         |   6 +-
 .../dashboard-tile/map-dashboard/package.json |  19 +-
 .../map-dashboard/webpack.config.js           |   6 +-
 .../dashboard-tile/pie-dashboard/package.json |  19 +-
 .../pie-dashboard/webpack.config.js           |   6 +-
 .../annotations-custom/package.json           |   7 +-
 .../annotations-custom/webpack.config.js      |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-chart/axis-annotations/package.json  |   7 +-
 .../axis-annotations/webpack.config.js        |   6 +-
 .../data-chart/axis-crossing/package.json     |   7 +-
 .../axis-crossing/webpack.config.js           |   6 +-
 .../axis-label-rotation/package.json          |  11 +-
 .../axis-label-rotation/webpack.config.js     |   6 +-
 .../data-chart/axis-locations/package.json    |   7 +-
 .../axis-locations/webpack.config.js          |   6 +-
 .../data-chart/axis-min-max-gap/package.json  |   7 +-
 .../axis-min-max-gap/webpack.config.js        |   6 +-
 .../data-chart/axis-settings/package.json     |   7 +-
 .../axis-settings/webpack.config.js           |   6 +-
 .../data-chart/axis-sharing/package.json      |   7 +-
 .../data-chart/axis-sharing/webpack.config.js |   6 +-
 .../charts/data-chart/axis-types/package.json |   7 +-
 .../data-chart/axis-types/webpack.config.js   |   6 +-
 .../bar-chart-multiple-sources/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../bar-chart-overlapping/package.json        |   7 +-
 .../bar-chart-overlapping/webpack.config.js   |   6 +-
 .../bar-chart-single-source/package.json      |   7 +-
 .../bar-chart-single-source/webpack.config.js |   6 +-
 .../data-chart/bar-chart-styling/package.json |   7 +-
 .../bar-chart-styling/webpack.config.js       |   6 +-
 .../callout-layer-styling/package.json        |   7 +-
 .../callout-layer-styling/webpack.config.js   |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../chart-highlight-filter/package.json       |  11 +-
 .../chart-highlight-filter/webpack.config.js  |   6 +-
 .../data-chart/chart-navigation/package.json  |   7 +-
 .../chart-navigation/webpack.config.js        |   6 +-
 .../data-chart/chart-overview/package.json    |   7 +-
 .../chart-overview/webpack.config.js          |   6 +-
 .../data-chart/chart-performance/package.json |   7 +-
 .../chart-performance/webpack.config.js       |   6 +-
 .../chart-synchronization/package.json        |   7 +-
 .../chart-synchronization/webpack.config.js   |   6 +-
 .../data-chart/chart-titles/package.json      |   7 +-
 .../data-chart/chart-titles/webpack.config.js |   6 +-
 .../data-chart/composite-chart/package.json   |   7 +-
 .../composite-chart/webpack.config.js         |   6 +-
 .../crosshair-layer-styling/package.json      |   7 +-
 .../crosshair-layer-styling/webpack.config.js |   6 +-
 .../custom-drawing-annotations/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../custom-editing-data/package.json          |   7 +-
 .../custom-editing-data/webpack.config.js     |   6 +-
 .../data-chart/dash-array-axes/package.json   |   7 +-
 .../dash-array-axes/webpack.config.js         |   6 +-
 .../data-chart/dash-array-series/package.json |   7 +-
 .../dash-array-series/webpack.config.js       |   6 +-
 .../dash-array-tickmarks/package.json         |   7 +-
 .../dash-array-tickmarks/webpack.config.js    |   6 +-
 .../dash-array-trendline/package.json         |   7 +-
 .../dash-array-trendline/webpack.config.js    |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-legend-grouping/package.json         |   7 +-
 .../data-legend-grouping/webpack.config.js    |   6 +-
 .../data-legend-styling/package.json          |   7 +-
 .../data-legend-styling/webpack.config.js     |   6 +-
 .../data-chart/data-legend/package.json       |   7 +-
 .../data-chart/data-legend/webpack.config.js  |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../data-tooltip-grouping/package.json        |  11 +-
 .../data-tooltip-grouping/webpack.config.js   |   6 +-
 .../data-tooltip-styling/package.json         |  11 +-
 .../data-tooltip-styling/webpack.config.js    |   6 +-
 .../data-chart/data-tooltip/package.json      |   7 +-
 .../data-chart/data-tooltip/webpack.config.js |   6 +-
 .../final-value-layer-styling/package.json    |   7 +-
 .../webpack.config.js                         |   6 +-
 .../financial-price-series/package.json       |   7 +-
 .../financial-price-series/webpack.config.js  |   6 +-
 .../data-chart/format-specifiers/package.json |   7 +-
 .../format-specifiers/webpack.config.js       |   6 +-
 .../charts/data-chart/legends/package.json    |   7 +-
 .../data-chart/legends/webpack.config.js      |   6 +-
 .../polar-area-chart-styling/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-chart/polar-area-chart/package.json  |   7 +-
 .../polar-area-chart/webpack.config.js        |   6 +-
 .../data-chart/polar-chart-types/package.json |   7 +-
 .../polar-chart-types/webpack.config.js       |   6 +-
 .../data-chart/polar-line-chart/package.json  |   7 +-
 .../polar-line-chart/webpack.config.js        |   6 +-
 .../polar-scatter-chart/package.json          |   7 +-
 .../polar-scatter-chart/webpack.config.js     |   6 +-
 .../polar-spline-area-chart/package.json      |   7 +-
 .../polar-spline-area-chart/webpack.config.js |   6 +-
 .../polar-spline-chart/package.json           |   7 +-
 .../polar-spline-chart/webpack.config.js      |   6 +-
 .../radial-area-chart-styling/package.json    |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-chart/radial-area-chart/package.json |   7 +-
 .../radial-area-chart/webpack.config.js       |   6 +-
 .../radial-chart-types/package.json           |   7 +-
 .../radial-chart-types/webpack.config.js      |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../radial-column-chart/package.json          |   7 +-
 .../radial-column-chart/webpack.config.js     |   6 +-
 .../data-chart/radial-label-mode/package.json |  11 +-
 .../radial-label-mode/webpack.config.js       |   6 +-
 .../data-chart/radial-line-chart/package.json |   7 +-
 .../radial-line-chart/webpack.config.js       |   6 +-
 .../data-chart/radial-pie-chart/package.json  |   7 +-
 .../radial-pie-chart/webpack.config.js        |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-chart/range-area-chart/package.json  |   7 +-
 .../range-area-chart/webpack.config.js        |   6 +-
 .../range-column-chart/package.json           |   7 +-
 .../range-column-chart/webpack.config.js      |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../scatter-bubble-chart-styling/package.json |   7 +-
 .../webpack.config.js                         |   6 +-
 .../scatter-line-chart/package.json           |   7 +-
 .../scatter-line-chart/webpack.config.js      |   6 +-
 .../scatter-point-chart/package.json          |   7 +-
 .../scatter-point-chart/webpack.config.js     |   6 +-
 .../scatter-spline-chart/package.json         |   7 +-
 .../scatter-spline-chart/webpack.config.js    |   6 +-
 .../data-chart/selection-matcher/package.json |   7 +-
 .../selection-matcher/webpack.config.js       |   6 +-
 .../data-chart/series-animations/package.json |   7 +-
 .../series-animations/webpack.config.js       |   6 +-
 .../series-annotations/package.json           |   7 +-
 .../series-annotations/webpack.config.js      |   6 +-
 .../data-chart/series-error-bars/package.json |   7 +-
 .../series-error-bars/webpack.config.js       |   6 +-
 .../series-highlighting/package.json          |   7 +-
 .../series-highlighting/webpack.config.js     |   6 +-
 .../series-marker-template/package.json       |   7 +-
 .../series-marker-template/webpack.config.js  |   6 +-
 .../data-chart/series-markers/package.json    |   7 +-
 .../series-markers/webpack.config.js          |   6 +-
 .../data-chart/series-tooltips/package.json   |   7 +-
 .../series-tooltips/webpack.config.js         |   6 +-
 .../data-chart/series-trendlines/package.json |   7 +-
 .../series-trendlines/webpack.config.js       |   6 +-
 .../series-value-overlay/package.json         |   7 +-
 .../series-value-overlay/webpack.config.js    |   6 +-
 .../stacked-100-area-chart/package.json       |   7 +-
 .../stacked-100-area-chart/webpack.config.js  |   6 +-
 .../stacked-100-bar-chart/package.json        |   7 +-
 .../stacked-100-bar-chart/webpack.config.js   |   6 +-
 .../stacked-100-column-chart/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../stacked-100-line-chart/package.json       |   7 +-
 .../stacked-100-line-chart/webpack.config.js  |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../stacked-100-spline-chart/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../stacked-area-chart/package.json           |   7 +-
 .../stacked-area-chart/webpack.config.js      |   6 +-
 .../data-chart/stacked-bar-chart/package.json |   7 +-
 .../stacked-bar-chart/webpack.config.js       |   6 +-
 .../stacked-chart-types/package.json          |   7 +-
 .../stacked-chart-types/webpack.config.js     |   6 +-
 .../stacked-column-chart/package.json         |   7 +-
 .../stacked-column-chart/webpack.config.js    |   6 +-
 .../stacked-line-chart/package.json           |   7 +-
 .../stacked-line-chart/webpack.config.js      |   6 +-
 .../stacked-spline-area-chart/package.json    |   7 +-
 .../webpack.config.js                         |   6 +-
 .../stacked-spline-chart/package.json         |   7 +-
 .../stacked-spline-chart/webpack.config.js    |   6 +-
 .../data-chart/tooltip-template/package.json  |   7 +-
 .../tooltip-template/webpack.config.js        |   6 +-
 .../data-chart/transition-event/package.json  |  11 +-
 .../transition-event/webpack.config.js        |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-financial-ohlc-series/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-financial-overlays/package.json      |   7 +-
 .../type-financial-overlays/webpack.config.js |   6 +-
 .../type-financial-series/package.json        |   7 +-
 .../type-financial-series/webpack.config.js   |   6 +-
 .../type-range-area-series/package.json       |   7 +-
 .../type-range-area-series/webpack.config.js  |   6 +-
 .../type-range-column-series/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-chart/type-range-series/package.json |   7 +-
 .../type-range-series/webpack.config.js       |   6 +-
 .../type-scatter-area-series/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-bubble-series/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-contour-series/package.json  |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-hd-series/package.json       |   7 +-
 .../type-scatter-hd-series/webpack.config.js  |   6 +-
 .../type-scatter-polygon-series/package.json  |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-polyline-series/package.json |   7 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-series/package.json          |   7 +-
 .../type-scatter-series/webpack.config.js     |   6 +-
 .../data-chart/type-shape-series/package.json |   7 +-
 .../type-shape-series/webpack.config.js       |   6 +-
 .../data-chart/waterfall-chart/package.json   |   7 +-
 .../waterfall-chart/webpack.config.js         |   6 +-
 .../animation-replay/package.json             |  11 +-
 .../animation-replay/webpack.config.js        |   6 +-
 .../data-pie-chart/animation/package.json     |  11 +-
 .../animation/webpack.config.js               |   6 +-
 .../highlight-filter/package.json             |   7 +-
 .../highlight-filter/webpack.config.js        |   6 +-
 .../data-pie-chart/highlighting/package.json  |  11 +-
 .../highlighting/webpack.config.js            |   6 +-
 .../charts/data-pie-chart/legend/package.json |  11 +-
 .../data-pie-chart/legend/webpack.config.js   |   6 +-
 .../charts/data-pie-chart/others/package.json |  11 +-
 .../data-pie-chart/others/webpack.config.js   |   6 +-
 .../data-pie-chart/overview/package.json      |   7 +-
 .../data-pie-chart/overview/webpack.config.js |   6 +-
 .../data-pie-chart/selection/package.json     |  11 +-
 .../selection/webpack.config.js               |   6 +-
 .../doughnut-chart/animation/package.json     |   7 +-
 .../animation/webpack.config.js               |   6 +-
 .../doughnut-chart/explosion/package.json     |   7 +-
 .../explosion/webpack.config.js               |   6 +-
 .../charts/doughnut-chart/legend/package.json |   7 +-
 .../doughnut-chart/legend/webpack.config.js   |   6 +-
 .../doughnut-chart/overview/package.json      |   7 +-
 .../doughnut-chart/overview/webpack.config.js |   6 +-
 .../charts/doughnut-chart/rings/package.json  |   7 +-
 .../doughnut-chart/rings/webpack.config.js    |   6 +-
 .../doughnut-chart/selection/package.json     |   7 +-
 .../selection/webpack.config.js               |   6 +-
 .../financial-chart/annotations/package.json  |   7 +-
 .../annotations/webpack.config.js             |   6 +-
 .../financial-chart/axis-types/package.json   |   7 +-
 .../axis-types/webpack.config.js              |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-legend-styling-props/package.json    |   7 +-
 .../webpack.config.js                         |   6 +-
 .../financial-chart/data-legend/package.json  |   7 +-
 .../data-legend/webpack.config.js             |   6 +-
 .../package.json                              |   7 +-
 .../webpack.config.js                         |   6 +-
 .../data-tooltip-styling-props/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../financial-chart/data-tooltip/package.json |   7 +-
 .../data-tooltip/webpack.config.js            |   6 +-
 .../format-specifiers/package.json            |   7 +-
 .../format-specifiers/webpack.config.js       |   6 +-
 .../high-frequency/package.json               |   7 +-
 .../high-frequency/webpack.config.js          |   6 +-
 .../financial-chart/high-volume/package.json  |   7 +-
 .../high-volume/webpack.config.js             |   6 +-
 .../indicator-customization/package.json      |   7 +-
 .../indicator-customization/webpack.config.js |   6 +-
 .../indicator-types/package.json              |   7 +-
 .../indicator-types/webpack.config.js         |   6 +-
 .../multiple-data/package.json                |   7 +-
 .../multiple-data/webpack.config.js           |   6 +-
 .../financial-chart/overview/package.json     |   7 +-
 .../overview/webpack.config.js                |   6 +-
 .../charts/financial-chart/panes/package.json |   7 +-
 .../financial-chart/panes/webpack.config.js   |   6 +-
 .../financial-chart/performance/package.json  |   7 +-
 .../performance/webpack.config.js             |   6 +-
 .../financial-chart/scrollbars/package.json   |   7 +-
 .../scrollbars/webpack.config.js              |   6 +-
 .../stock-index-chart/package.json            |   7 +-
 .../stock-index-chart/webpack.config.js       |   6 +-
 .../financial-chart/styling/package.json      |   7 +-
 .../financial-chart/styling/webpack.config.js |   6 +-
 .../financial-chart/titles/package.json       |   7 +-
 .../financial-chart/titles/webpack.config.js  |   6 +-
 .../tooltip-types/package.json                |   7 +-
 .../tooltip-types/webpack.config.js           |   6 +-
 .../financial-chart/trendlines/package.json   |   7 +-
 .../trendlines/webpack.config.js              |   6 +-
 .../financial-chart/volume-types/package.json |   7 +-
 .../volume-types/webpack.config.js            |   6 +-
 .../charts/pie-chart/animation/package.json   |   7 +-
 .../pie-chart/animation/webpack.config.js     |   6 +-
 .../charts/pie-chart/explosion/package.json   |   7 +-
 .../pie-chart/explosion/webpack.config.js     |   6 +-
 samples/charts/pie-chart/legend/package.json  |   7 +-
 .../charts/pie-chart/legend/webpack.config.js |   6 +-
 samples/charts/pie-chart/others/package.json  |   7 +-
 .../charts/pie-chart/others/webpack.config.js |   6 +-
 .../charts/pie-chart/overview/package.json    |   7 +-
 .../pie-chart/overview/webpack.config.js      |   6 +-
 .../charts/pie-chart/selection/package.json   |   7 +-
 .../pie-chart/selection/webpack.config.js     |   6 +-
 samples/charts/pie-chart/styling/package.json |   7 +-
 .../pie-chart/styling/webpack.config.js       |   6 +-
 .../sparkline/display-area/package.json       |   7 +-
 .../sparkline/display-area/webpack.config.js  |   6 +-
 .../sparkline/display-column/package.json     |   7 +-
 .../display-column/webpack.config.js          |   6 +-
 .../sparkline/display-lines/package.json      |  11 +-
 .../sparkline/display-lines/webpack.config.js |   6 +-
 .../sparkline/display-types/package.json      |   7 +-
 .../sparkline/display-types/webpack.config.js |   6 +-
 .../sparkline/display-winloss/package.json    |   7 +-
 .../display-winloss/webpack.config.js         |   6 +-
 samples/charts/sparkline/grid/package.json    |  13 +-
 .../charts/sparkline/grid/webpack.config.js   |   6 +-
 samples/charts/sparkline/markers/package.json |  11 +-
 .../sparkline/markers/webpack.config.js       |   6 +-
 .../sparkline/normal-range/package.json       |  11 +-
 .../sparkline/normal-range/webpack.config.js  |   6 +-
 .../charts/sparkline/trendlines/package.json  |  11 +-
 .../sparkline/trendlines/webpack.config.js    |   6 +-
 .../sparkline/unknown-values/package.json     |  11 +-
 .../unknown-values/webpack.config.js          |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../actions-built-in-data-chart/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../toolbar/color-editor-support/package.json |  11 +-
 .../color-editor-support/webpack.config.js    |   6 +-
 .../charts/toolbar/custom-tool/package.json   |  11 +-
 .../toolbar/custom-tool/webpack.config.js     |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 samples/charts/toolbar/theming/package.json   |  11 +-
 .../charts/toolbar/theming/webpack.config.js  |   6 +-
 samples/charts/tree-map/events/package.json   |   7 +-
 .../charts/tree-map/events/webpack.config.js  |   6 +-
 .../highlighting-percent-based/package.json   |   7 +-
 .../webpack.config.js                         |   6 +-
 .../charts/tree-map/highlighting/package.json |  11 +-
 .../tree-map/highlighting/webpack.config.js   |   6 +-
 samples/charts/tree-map/layout/package.json   |  11 +-
 .../charts/tree-map/layout/webpack.config.js  |   6 +-
 samples/charts/tree-map/overview/package.json |   7 +-
 .../tree-map/overview/webpack.config.js       |   6 +-
 samples/charts/tree-map/styling/package.json  |   7 +-
 .../charts/tree-map/styling/webpack.config.js |   6 +-
 .../charts/zoomslider/overview/package.json   |   7 +-
 .../zoomslider/overview/webpack.config.js     |   6 +-
 .../overview/package.json                     |  11 +-
 .../overview/webpack.config.js                |   6 +-
 .../x-date-picker/date-limits/package.json    |   9 +-
 .../date-limits/webpack.config.js             |   6 +-
 .../x-date-picker/editing/package.json        |   9 +-
 .../x-date-picker/editing/webpack.config.js   |   6 +-
 .../editors/x-date-picker/format/package.json |   9 +-
 .../x-date-picker/format/webpack.config.js    |   6 +-
 .../x-date-picker/overview/package.json       |   9 +-
 .../x-date-picker/overview/webpack.config.js  |   6 +-
 .../editors/x-date-picker/range/package.json  |   9 +-
 .../x-date-picker/range/webpack.config.js     |   6 +-
 .../operations-on-workbooks/package.json      |  13 +-
 .../operations-on-workbooks/webpack.config.js |   6 +-
 .../operations-on-worksheets/package.json     |   7 +-
 .../webpack.config.js                         |   6 +-
 .../excel/excel-library/overview/package.json |   7 +-
 .../excel-library/overview/webpack.config.js  |   6 +-
 .../working-with-cells/package.json           |   7 +-
 .../working-with-cells/webpack.config.js      |   6 +-
 .../working-with-charts/package.json          |  15 +-
 .../working-with-charts/webpack.config.js     |   6 +-
 .../working-with-sparklines/package.json      |  15 +-
 .../working-with-sparklines/webpack.config.js |   6 +-
 .../excel/spreadsheet/activation/package.json |   9 +-
 .../spreadsheet/activation/webpack.config.js  |   6 +-
 .../spreadsheet/adapter-chart/package.json    |  13 +-
 .../adapter-chart/webpack.config.js           |   6 +-
 .../spreadsheet/adapter-combo/package.json    |  13 +-
 .../adapter-combo/webpack.config.js           |   6 +-
 .../excel/spreadsheet/clipboard/package.json  |   9 +-
 .../spreadsheet/clipboard/webpack.config.js   |   6 +-
 .../excel/spreadsheet/commands/package.json   |   9 +-
 .../spreadsheet/commands/webpack.config.js    |   6 +-
 .../conditional-formatting/package.json       |   9 +-
 .../conditional-formatting/webpack.config.js  |   6 +-
 .../spreadsheet/config-options/package.json   |   9 +-
 .../config-options/webpack.config.js          |   6 +-
 .../spreadsheet/data-validation/package.json  |   9 +-
 .../data-validation/webpack.config.js         |   6 +-
 .../spreadsheet/filter-dialog/package.json    |   9 +-
 .../filter-dialog/webpack.config.js           |   6 +-
 .../spreadsheet/format-dialog/package.json    |   9 +-
 .../format-dialog/webpack.config.js           |   6 +-
 .../excel/spreadsheet/hyperlinks/package.json |   9 +-
 .../spreadsheet/hyperlinks/webpack.config.js  |   6 +-
 .../excel/spreadsheet/overview/package.json   |   9 +-
 .../spreadsheet/overview/webpack.config.js    |   6 +-
 .../spreadsheet/sort-dialog/package.json      |   9 +-
 .../spreadsheet/sort-dialog/webpack.config.js |   6 +-
 .../bullet-graph/animation/package.json       |   7 +-
 .../bullet-graph/animation/webpack.config.js  |   6 +-
 .../bullet-graph/background/package.json      |   7 +-
 .../bullet-graph/background/webpack.config.js |   6 +-
 .../highlight-needle/package.json             |   7 +-
 .../highlight-needle/webpack.config.js        |   6 +-
 .../gauges/bullet-graph/labels/package.json   |   7 +-
 .../bullet-graph/labels/webpack.config.js     |   6 +-
 .../gauges/bullet-graph/measures/package.json |   7 +-
 .../bullet-graph/measures/webpack.config.js   |   6 +-
 .../gauges/bullet-graph/ranges/package.json   |   7 +-
 .../bullet-graph/ranges/webpack.config.js     |   6 +-
 .../gauges/bullet-graph/scale/package.json    |   7 +-
 .../bullet-graph/scale/webpack.config.js      |   6 +-
 .../bullet-graph/tickmarks/package.json       |   7 +-
 .../bullet-graph/tickmarks/webpack.config.js  |   6 +-
 .../bullet-graph/type-filled/package.json     |   7 +-
 .../type-filled/webpack.config.js             |   6 +-
 .../bullet-graph/type-horizontal/package.json |   7 +-
 .../type-horizontal/webpack.config.js         |   6 +-
 .../bullet-graph/type-reversed/package.json   |   7 +-
 .../type-reversed/webpack.config.js           |   6 +-
 .../bullet-graph/type-segmented/package.json  |   7 +-
 .../type-segmented/webpack.config.js          |   6 +-
 .../bullet-graph/type-vertical/package.json   |   7 +-
 .../type-vertical/webpack.config.js           |   6 +-
 .../linear-gauge/animation/package.json       |   7 +-
 .../linear-gauge/animation/webpack.config.js  |   6 +-
 .../gauges/linear-gauge/backing/package.json  |   7 +-
 .../linear-gauge/backing/webpack.config.js    |   6 +-
 .../highlight-needle/package.json             |   7 +-
 .../highlight-needle/webpack.config.js        |   6 +-
 .../gauges/linear-gauge/labels/package.json   |   7 +-
 .../linear-gauge/labels/webpack.config.js     |   6 +-
 .../gauges/linear-gauge/needle/package.json   |   7 +-
 .../linear-gauge/needle/webpack.config.js     |   6 +-
 .../gauges/linear-gauge/ranges/package.json   |   7 +-
 .../linear-gauge/ranges/webpack.config.js     |   6 +-
 .../gauges/linear-gauge/scale/package.json    |   7 +-
 .../linear-gauge/scale/webpack.config.js      |   6 +-
 .../linear-gauge/tickmarks/package.json       |   7 +-
 .../linear-gauge/tickmarks/webpack.config.js  |   6 +-
 .../linear-gauge/type-curved/package.json     |   7 +-
 .../type-curved/webpack.config.js             |   6 +-
 .../linear-gauge/type-filled/package.json     |   7 +-
 .../type-filled/webpack.config.js             |   6 +-
 .../linear-gauge/type-horizontal/package.json |   7 +-
 .../type-horizontal/webpack.config.js         |   6 +-
 .../type-multi-range/package.json             |   7 +-
 .../type-multi-range/webpack.config.js        |   6 +-
 .../type-multi-scale/package.json             |   7 +-
 .../type-multi-scale/webpack.config.js        |   6 +-
 .../linear-gauge/type-segmented/package.json  |   7 +-
 .../type-segmented/webpack.config.js          |   6 +-
 .../linear-gauge/type-vertical/package.json   |   7 +-
 .../type-vertical/webpack.config.js           |   6 +-
 .../radial-gauge/animation/package.json       |   7 +-
 .../radial-gauge/animation/webpack.config.js  |   6 +-
 .../gauges/radial-gauge/backing/package.json  |   7 +-
 .../radial-gauge/backing/webpack.config.js    |   6 +-
 .../highlight-needle/package.json             |   7 +-
 .../highlight-needle/webpack.config.js        |   6 +-
 .../gauges/radial-gauge/labels/package.json   |   7 +-
 .../radial-gauge/labels/webpack.config.js     |   6 +-
 .../gauges/radial-gauge/needle/package.json   |   7 +-
 .../radial-gauge/needle/webpack.config.js     |   6 +-
 .../radial-gauge/optical-scaling/package.json |   7 +-
 .../optical-scaling/webpack.config.js         |   6 +-
 .../gauges/radial-gauge/ranges/package.json   |   7 +-
 .../radial-gauge/ranges/webpack.config.js     |   6 +-
 .../gauges/radial-gauge/scale/package.json    |   7 +-
 .../radial-gauge/scale/webpack.config.js      |   6 +-
 .../radial-gauge/tickmarks/package.json       |   7 +-
 .../radial-gauge/tickmarks/webpack.config.js  |   6 +-
 .../radial-gauge/type-column/package.json     |   7 +-
 .../type-column/webpack.config.js             |   6 +-
 .../radial-gauge/type-curved/package.json     |   7 +-
 .../type-curved/webpack.config.js             |   6 +-
 .../radial-gauge/type-direction/package.json  |   7 +-
 .../type-direction/webpack.config.js          |   6 +-
 .../radial-gauge/type-full/package.json       |   7 +-
 .../radial-gauge/type-full/webpack.config.js  |   6 +-
 .../radial-gauge/type-half/package.json       |   7 +-
 .../radial-gauge/type-half/webpack.config.js  |   6 +-
 .../radial-gauge/type-quatre/package.json     |   7 +-
 .../type-quatre/webpack.config.js             |   6 +-
 .../radial-gauge/type-ring/package.json       |   7 +-
 .../radial-gauge/type-ring/webpack.config.js  |   6 +-
 .../radial-gauge/type-segmented/package.json  |   7 +-
 .../type-segmented/webpack.config.js          |   6 +-
 .../radial-gauge/type-semi/package.json       |   7 +-
 .../radial-gauge/type-semi/webpack.config.js  |   6 +-
 .../data-grid/accessibility/package.json      |  11 +-
 .../data-grid/accessibility/webpack.config.js |   6 +-
 .../binding-data-service/package.json         |  11 +-
 .../binding-data-service/webpack.config.js    |   6 +-
 .../data-grid/binding-live-data/package.json  |  13 +-
 .../binding-live-data/webpack.config.js       |   6 +-
 .../data-grid/binding-local-data/package.json |  11 +-
 .../binding-local-data/webpack.config.js      |   6 +-
 .../binding-remote-data/package.json          |  13 +-
 .../binding-remote-data/webpack.config.js     |   6 +-
 .../data-grid/cell-activation/package.json    |  11 +-
 .../cell-activation/webpack.config.js         |   6 +-
 .../grids/data-grid/cell-editing/package.json |  11 +-
 .../data-grid/cell-editing/webpack.config.js  |   6 +-
 .../grids/data-grid/cell-merging/package.json |  13 +-
 .../data-grid/cell-merging/webpack.config.js  |   6 +-
 .../data-grid/cell-selection/package.json     |  11 +-
 .../cell-selection/webpack.config.js          |   6 +-
 .../data-grid/column-animation/package.json   |  11 +-
 .../column-animation/webpack.config.js        |   6 +-
 .../column-chooser-picker/package.json        |  11 +-
 .../column-chooser-picker/webpack.config.js   |   6 +-
 .../column-chooser-toolbar/package.json       |  11 +-
 .../column-chooser-toolbar/webpack.config.js  |   6 +-
 .../column-filter-expressions/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-filter-operands/package.json       |  11 +-
 .../column-filter-operands/webpack.config.js  |   6 +-
 .../data-grid/column-filtering/package.json   |  11 +-
 .../column-filtering/webpack.config.js        |   6 +-
 .../data-grid/column-moving/package.json      |  11 +-
 .../data-grid/column-moving/webpack.config.js |   6 +-
 .../data-grid/column-options/package.json     |  11 +-
 .../column-options/webpack.config.js          |   6 +-
 .../column-pinning-picker/package.json        |  11 +-
 .../column-pinning-picker/webpack.config.js   |   6 +-
 .../column-pinning-toolbar/package.json       |  11 +-
 .../column-pinning-toolbar/webpack.config.js  |   6 +-
 .../data-grid/column-resizing/package.json    |  11 +-
 .../column-resizing/webpack.config.js         |   6 +-
 .../data-grid/column-scrolling/package.json   |  11 +-
 .../column-scrolling/webpack.config.js        |   6 +-
 .../data-grid/column-sorting/package.json     |  11 +-
 .../column-sorting/webpack.config.js          |   6 +-
 .../data-grid/column-summaries/package.json   |  11 +-
 .../column-summaries/webpack.config.js        |   6 +-
 .../grids/data-grid/column-types/package.json |  13 +-
 .../data-grid/column-types/webpack.config.js  |   6 +-
 .../data-grid/load-save-layout/package.json   |  13 +-
 .../load-save-layout/webpack.config.js        |   6 +-
 .../grids/data-grid/localization/package.json |  13 +-
 .../data-grid/localization/webpack.config.js  |   6 +-
 samples/grids/data-grid/overview/package.json |  13 +-
 .../data-grid/overview/webpack.config.js      |   6 +-
 samples/grids/data-grid/pager/package.json    |  11 +-
 .../grids/data-grid/pager/webpack.config.js   |   6 +-
 .../grids/data-grid/performance/package.json  |  11 +-
 .../data-grid/performance/webpack.config.js   |   6 +-
 .../row-group-descriptions/package.json       |  11 +-
 .../row-group-descriptions/webpack.config.js  |   6 +-
 .../grids/data-grid/row-grouping/package.json |  11 +-
 .../data-grid/row-grouping/webpack.config.js  |   6 +-
 .../data-grid/row-highlighting/package.json   |  11 +-
 .../row-highlighting/webpack.config.js        |   6 +-
 .../grids/data-grid/row-paging/package.json   |  11 +-
 .../data-grid/row-paging/webpack.config.js    |   6 +-
 .../grids/data-grid/row-pinning/package.json  |  11 +-
 .../data-grid/row-pinning/webpack.config.js   |   6 +-
 .../data-grid/row-selection/package.json      |  11 +-
 .../data-grid/row-selection/webpack.config.js |   6 +-
 .../type-comparison-table/package.json        |  13 +-
 .../type-comparison-table/webpack.config.js   |   6 +-
 .../data-grid/type-heatmap-table/package.json |  11 +-
 .../type-heatmap-table/webpack.config.js      |   6 +-
 .../type-marketing-table/package.json         |  13 +-
 .../type-marketing-table/webpack.config.js    |   6 +-
 .../data-grid/type-matrix-table/package.json  |  11 +-
 .../type-matrix-table/webpack.config.js       |   6 +-
 .../type-periodic-table/package.json          |  11 +-
 .../type-periodic-table/webpack.config.js     |   6 +-
 .../grids/data-grid/type-table/package.json   |  11 +-
 .../data-grid/type-table/webpack.config.js    |   6 +-
 samples/grids/grid/action-strip/package.json  |  11 +-
 .../grids/grid/action-strip/webpack.config.js |   6 +-
 .../advanced-filtering-options/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../advanced-filtering-style/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/binding-composite-data/package.json  |  11 +-
 .../binding-composite-data/webpack.config.js  |   6 +-
 .../grids/grid/binding-crud-data/package.json |  11 +-
 .../grid/binding-crud-data/webpack.config.js  |   6 +-
 .../grid/binding-nested-data-1/package.json   |  11 +-
 .../binding-nested-data-1/webpack.config.js   |   6 +-
 .../grids/grid/cascading-combo/package.json   |  11 +-
 .../grid/cascading-combo/webpack.config.js    |   6 +-
 .../grid/cell-editing-sample/package.json     |  11 +-
 .../cell-editing-sample/webpack.config.js     |   6 +-
 .../grid/cell-editing-styling/package.json    |  11 +-
 .../cell-editing-styling/webpack.config.js    |   6 +-
 .../grid/cell-selection-mode/package.json     |  11 +-
 .../cell-selection-mode/webpack.config.js     |   6 +-
 .../grid/cell-selection-style/package.json    |  11 +-
 .../cell-selection-style/webpack.config.js    |   6 +-
 .../grid/change-icons-custom/package.json     |  11 +-
 .../change-icons-custom/webpack.config.js     |   6 +-
 .../grid/clipboard-operations/package.json    |  11 +-
 .../clipboard-operations/webpack.config.js    |   6 +-
 .../grid/column-auto-sizing/package.json      |  11 +-
 .../grid/column-auto-sizing/webpack.config.js |   6 +-
 .../column-collapsible-groups/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grids/grid/column-data-types/package.json |  11 +-
 .../grid/column-data-types/webpack.config.js  |   6 +-
 .../grid/column-hiding-options/package.json   |  11 +-
 .../column-hiding-options/webpack.config.js   |   6 +-
 .../column-hiding-toolbar-style/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/column-hiding-toolbar/package.json   |  11 +-
 .../column-hiding-toolbar/webpack.config.js   |   6 +-
 .../grid/column-moving-options/package.json   |  11 +-
 .../column-moving-options/webpack.config.js   |   6 +-
 .../grid/column-moving-styles/package.json    |  11 +-
 .../column-moving-styles/webpack.config.js    |   6 +-
 .../grid/column-pinning-options/package.json  |  11 +-
 .../column-pinning-options/webpack.config.js  |   6 +-
 .../column-pinning-right-side/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/column-pinning-styles/package.json   |  11 +-
 .../column-pinning-styles/webpack.config.js   |   6 +-
 .../grids/grid/column-pinning/package.json    |  11 +-
 .../grid/column-pinning/webpack.config.js     |   6 +-
 .../grid/column-resize-styling/package.json   |  11 +-
 .../column-resize-styling/webpack.config.js   |   6 +-
 .../grids/grid/column-resizing/package.json   |  11 +-
 .../grid/column-resizing/webpack.config.js    |   6 +-
 .../grid/column-selection-group/package.json  |  11 +-
 .../column-selection-group/webpack.config.js  |   6 +-
 .../grid/column-selection-mode/package.json   |  11 +-
 .../column-selection-mode/webpack.config.js   |   6 +-
 .../grid/column-selection-styles/package.json |  11 +-
 .../column-selection-styles/webpack.config.js |   6 +-
 .../column-sorting-indicators/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/column-sorting-options/package.json  |  11 +-
 .../column-sorting-options/webpack.config.js  |   6 +-
 .../grid/column-sorting-style/package.json    |  11 +-
 .../column-sorting-style/webpack.config.js    |   6 +-
 .../conditional-cell-style-1/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../conditional-cell-style-2/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../conditional-row-selectors/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/custom-context-menu/package.json     |  11 +-
 .../custom-context-menu/webpack.config.js     |   6 +-
 .../grids/grid/custom-filtering/package.json  |  11 +-
 .../grid/custom-filtering/webpack.config.js   |   6 +-
 .../data-batch-editing-actions/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../data-exporting-indicator/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/data-paste-options/package.json      |  11 +-
 .../grid/data-paste-options/webpack.config.js |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grids/grid/data-searching/package.json    |  11 +-
 .../grid/data-searching/webpack.config.js     |   6 +-
 .../grid/data-summaries-custom/package.json   |  11 +-
 .../data-summaries-custom/webpack.config.js   |   6 +-
 .../grid/data-summary-formatter/package.json  |  11 +-
 .../data-summary-formatter/webpack.config.js  |   6 +-
 .../grid/data-summary-options/package.json    |  11 +-
 .../data-summary-options/webpack.config.js    |   6 +-
 .../grid/data-summary-template/package.json   |  11 +-
 .../data-summary-template/webpack.config.js   |   6 +-
 .../grid/data-validation-style/package.json   |  11 +-
 .../data-validation-style/webpack.config.js   |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/data-validator-service/package.json  |  11 +-
 .../data-validator-service/webpack.config.js  |   6 +-
 .../grids/grid/editing-columns/package.json   |  11 +-
 .../grid/editing-columns/webpack.config.js    |   6 +-
 .../grids/grid/editing-events/package.json    |  11 +-
 .../grid/editing-events/webpack.config.js     |   6 +-
 .../editing-excel-style-custom/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/editing-excel-style/package.json     |  11 +-
 .../editing-excel-style/webpack.config.js     |   6 +-
 .../grids/grid/editing-lifecycle/package.json |  11 +-
 .../grid/editing-lifecycle/webpack.config.js  |   6 +-
 .../grids/grid/excel-exporting/package.json   |  11 +-
 .../grid/excel-exporting/webpack.config.js    |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../excel-style-filtering-style/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../external-advanced-filtering/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grids/grid/filtering-options/package.json |  11 +-
 .../grid/filtering-options/webpack.config.js  |   6 +-
 .../grid/filtering-strategy/package.json      |  11 +-
 .../grid/filtering-strategy/webpack.config.js |   6 +-
 .../grids/grid/filtering-style/package.json   |  11 +-
 .../grid/filtering-style/webpack.config.js    |   6 +-
 samples/grids/grid/finjs/package.json         |  13 +-
 samples/grids/grid/finjs/webpack.config.js    |   6 +-
 .../grids/grid/groupby-custom/package.json    |  11 +-
 .../grid/groupby-custom/webpack.config.js     |   6 +-
 .../grid/groupby-expressions/package.json     |  11 +-
 .../groupby-expressions/webpack.config.js     |   6 +-
 .../grids/grid/groupby-paging/package.json    |  11 +-
 .../grid/groupby-paging/webpack.config.js     |   6 +-
 .../grids/grid/groupby-styling/package.json   |  11 +-
 .../grid/groupby-styling/webpack.config.js    |   6 +-
 .../grid/groupby-summary-options/package.json |  11 +-
 .../groupby-summary-options/webpack.config.js |   6 +-
 .../grid/groupby-summary-styling/package.json |  11 +-
 .../groupby-summary-styling/webpack.config.js |   6 +-
 .../grids/grid/infinite-scroll/package.json   |  11 +-
 .../grid/infinite-scroll/webpack.config.js    |   6 +-
 .../keyboard-custom-navigation/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/keyboard-mrl-navigation/package.json |  11 +-
 .../keyboard-mrl-navigation/webpack.config.js |   6 +-
 .../keyboard-navigation-guide/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/layout-display-density/package.json  |  11 +-
 .../layout-display-density/webpack.config.js  |   6 +-
 samples/grids/grid/master-detail/package.json |  11 +-
 .../grid/master-detail/webpack.config.js      |   6 +-
 .../multi-cell-selection-mode/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../multi-column-headers-export/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../multi-column-headers-styling/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../multi-row-layout-options/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/multi-row-layout-style/package.json  |  11 +-
 .../multi-row-layout-style/webpack.config.js  |   6 +-
 samples/grids/grid/overview/package.json      |  11 +-
 samples/grids/grid/overview/webpack.config.js |   6 +-
 samples/grids/grid/paste/package.json         |  11 +-
 samples/grids/grid/paste/webpack.config.js    |   6 +-
 .../grid/remote-paging-data/package.json      |  11 +-
 .../grid/remote-paging-data/webpack.config.js |   6 +-
 .../grid/remote-paging-grid/package.json      |  11 +-
 .../grid/remote-paging-grid/webpack.config.js |   6 +-
 samples/grids/grid/row-adding/package.json    |  11 +-
 .../grids/grid/row-adding/webpack.config.js   |   6 +-
 samples/grids/grid/row-classes/package.json   |  11 +-
 .../grids/grid/row-classes/webpack.config.js  |   6 +-
 samples/grids/grid/row-drag-base/package.json |  11 +-
 .../grid/row-drag-base/webpack.config.js      |   6 +-
 .../grid/row-editing-options/package.json     |  11 +-
 .../row-editing-options/webpack.config.js     |   6 +-
 .../grids/grid/row-editing-style/package.json |  11 +-
 .../grid/row-editing-style/webpack.config.js  |   6 +-
 .../grids/grid/row-paging-basic/package.json  |  11 +-
 .../grid/row-paging-basic/webpack.config.js   |   6 +-
 .../grid/row-paging-options/package.json      |  11 +-
 .../grid/row-paging-options/webpack.config.js |   6 +-
 .../grids/grid/row-pinning-drag/package.json  |  11 +-
 .../grid/row-pinning-drag/webpack.config.js   |   6 +-
 .../row-pinning-extra-column/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grid/row-pinning-options/package.json     |  11 +-
 .../row-pinning-options/webpack.config.js     |   6 +-
 .../grids/grid/row-pinning-style/package.json |  11 +-
 .../grid/row-pinning-style/webpack.config.js  |   6 +-
 samples/grids/grid/row-reorder/package.json   |  11 +-
 .../grids/grid/row-reorder/webpack.config.js  |   6 +-
 .../grid/row-selection-mode/package.json      |  11 +-
 .../grid/row-selection-mode/webpack.config.js |   6 +-
 .../row-selection-template-excel/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 samples/grids/grid/row-styles/package.json    |  11 +-
 .../grids/grid/row-styles/webpack.config.js   |   6 +-
 .../grid/state-persistence-about/package.json |  11 +-
 .../state-persistence-about/webpack.config.js |   6 +-
 .../grid/state-persistence-main/package.json  |  11 +-
 .../state-persistence-main/webpack.config.js  |   6 +-
 .../grid/styling-custom-CSS/package.json      |  11 +-
 .../grid/styling-custom-CSS/webpack.config.js |   6 +-
 .../grids/grid/toolbar-sample-1/package.json  |  11 +-
 .../grid/toolbar-sample-1/webpack.config.js   |   6 +-
 .../grids/grid/toolbar-sample-2/package.json  |  11 +-
 .../grid/toolbar-sample-2/webpack.config.js   |   6 +-
 .../grids/grid/toolbar-sample-3/package.json  |  11 +-
 .../grid/toolbar-sample-3/webpack.config.js   |   6 +-
 .../grids/grid/toolbar-sample-4/package.json  |  11 +-
 .../grid/toolbar-sample-4/webpack.config.js   |   6 +-
 samples/grids/grid/toolbar-style/package.json |  11 +-
 .../grid/toolbar-style/webpack.config.js      |   6 +-
 .../action-strip/package.json                 |  11 +-
 .../action-strip/webpack.config.js            |   6 +-
 .../advanced-filtering-options/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../advanced-filtering-style/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../cell-editing-sample/package.json          |  11 +-
 .../cell-editing-sample/webpack.config.js     |   6 +-
 .../cell-editing-styling/package.json         |  11 +-
 .../cell-editing-styling/webpack.config.js    |   6 +-
 .../cell-selection-mode/package.json          |  11 +-
 .../cell-selection-mode/webpack.config.js     |   6 +-
 .../cell-selection-overview/package.json      |  11 +-
 .../cell-selection-overview/webpack.config.js |   6 +-
 .../cell-selection-style/package.json         |  11 +-
 .../cell-selection-style/webpack.config.js    |   6 +-
 .../cell-selection-styling/package.json       |  11 +-
 .../cell-selection-styling/webpack.config.js  |   6 +-
 .../column-auto-sizing/package.json           |  11 +-
 .../column-auto-sizing/webpack.config.js      |   6 +-
 .../column-collapsible-groups/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-hiding-toolbar-style/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-hiding-toolbar/package.json        |  11 +-
 .../column-hiding-toolbar/webpack.config.js   |   6 +-
 .../column-moving-options/package.json        |  11 +-
 .../column-moving-options/webpack.config.js   |   6 +-
 .../column-moving-styles/package.json         |  11 +-
 .../column-moving-styles/webpack.config.js    |   6 +-
 .../column-pinning-options/package.json       |  11 +-
 .../column-pinning-options/webpack.config.js  |   6 +-
 .../column-pinning-right-side/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-pinning-styles/package.json        |  11 +-
 .../column-pinning-styles/webpack.config.js   |   6 +-
 .../column-pinning/package.json               |  11 +-
 .../column-pinning/webpack.config.js          |   6 +-
 .../column-resize-styling/package.json        |  11 +-
 .../column-resize-styling/webpack.config.js   |   6 +-
 .../column-resizing/package.json              |  11 +-
 .../column-resizing/webpack.config.js         |   6 +-
 .../column-selection-group/package.json       |  11 +-
 .../column-selection-group/webpack.config.js  |   6 +-
 .../column-selection-mode/package.json        |  11 +-
 .../column-selection-mode/webpack.config.js   |   6 +-
 .../column-selection-styles/package.json      |  11 +-
 .../column-selection-styles/webpack.config.js |   6 +-
 .../column-sorting-indicators/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-sorting-options/package.json       |  11 +-
 .../column-sorting-options/webpack.config.js  |   6 +-
 .../column-sorting-style/package.json         |  11 +-
 .../column-sorting-style/webpack.config.js    |   6 +-
 .../conditional-cell-style-1/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../conditional-cell-style-2/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../conditional-row-selectors/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../custom-filtering/package.json             |  11 +-
 .../custom-filtering/webpack.config.js        |   6 +-
 .../data-exporting-indicator/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../data-summary-formatter/package.json       |  11 +-
 .../data-summary-formatter/webpack.config.js  |   6 +-
 .../data-summary-options-styling/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../data-summary-options/package.json         |  11 +-
 .../data-summary-options/webpack.config.js    |   6 +-
 .../data-summary-template/package.json        |  11 +-
 .../data-summary-template/webpack.config.js   |   6 +-
 .../editing-columns/package.json              |  11 +-
 .../editing-columns/webpack.config.js         |   6 +-
 .../editing-events/package.json               |  11 +-
 .../editing-events/webpack.config.js          |   6 +-
 .../editing-lifecycle/package.json            |  11 +-
 .../editing-lifecycle/webpack.config.js       |   6 +-
 .../excel-exporting/package.json              |  11 +-
 .../excel-exporting/webpack.config.js         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../excel-style-filtering-style/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../filtering-options/package.json            |  11 +-
 .../filtering-options/webpack.config.js       |   6 +-
 .../filtering-style/package.json              |  11 +-
 .../filtering-style/webpack.config.js         |   6 +-
 .../hierarchical-grid-options/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../hierarchical-grid-styling/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../layout-display-density/package.json       |  11 +-
 .../layout-display-density/webpack.config.js  |   6 +-
 .../multi-column-headers-export/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../multi-column-headers-styling/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../hierarchical-grid/overview/package.json   |  11 +-
 .../overview/webpack.config.js                |   6 +-
 .../remote-paging-sample/package.json         |  11 +-
 .../remote-paging-sample/webpack.config.js    |   6 +-
 .../hierarchical-grid/row-adding/package.json |  11 +-
 .../row-adding/webpack.config.js              |   6 +-
 .../row-classes/package.json                  |  11 +-
 .../row-classes/webpack.config.js             |   6 +-
 .../row-drag-base/package.json                |  11 +-
 .../row-drag-base/webpack.config.js           |   6 +-
 .../row-editing-options/package.json          |  11 +-
 .../row-editing-options/webpack.config.js     |   6 +-
 .../row-editing-style/package.json            |  11 +-
 .../row-editing-style/webpack.config.js       |   6 +-
 .../row-pinning-extra-column/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../row-pinning-options/package.json          |  11 +-
 .../row-pinning-options/webpack.config.js     |   6 +-
 .../row-pinning-style/package.json            |  11 +-
 .../row-pinning-style/webpack.config.js       |   6 +-
 .../row-reorder/package.json                  |  11 +-
 .../row-reorder/webpack.config.js             |   6 +-
 .../row-selection-mode/package.json           |  11 +-
 .../row-selection-mode/webpack.config.js      |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../hierarchical-grid/row-styles/package.json |  11 +-
 .../row-styles/webpack.config.js              |   6 +-
 .../state-persistence-about/package.json      |  11 +-
 .../state-persistence-about/webpack.config.js |   6 +-
 .../state-persistence-main/package.json       |  11 +-
 .../state-persistence-main/webpack.config.js  |   6 +-
 .../toolbar-sample-1/package.json             |  11 +-
 .../toolbar-sample-1/webpack.config.js        |   6 +-
 .../toolbar-sample-2/package.json             |  11 +-
 .../toolbar-sample-2/webpack.config.js        |   6 +-
 .../toolbar-sample-3/package.json             |  11 +-
 .../toolbar-sample-3/webpack.config.js        |   6 +-
 .../toolbar-sample-4/package.json             |  11 +-
 .../toolbar-sample-4/webpack.config.js        |   6 +-
 .../toolbar-style/package.json                |  11 +-
 .../toolbar-style/webpack.config.js           |   6 +-
 .../grids/list/add-list-items/package.json    |   5 +-
 .../list/add-list-items/webpack.config.js     |   6 +-
 .../grids/list/list-item-content/package.json |   3 +-
 .../list/list-item-content/webpack.config.js  |   6 +-
 samples/grids/list/overview/package.json      |   3 +-
 samples/grids/list/overview/webpack.config.js |   6 +-
 samples/grids/list/styling/package.json       |   3 +-
 samples/grids/list/styling/webpack.config.js  |   6 +-
 .../aggregate-max-sales/package.json          |  11 +-
 .../aggregate-max-sales/webpack.config.js     |   6 +-
 .../aggregate-units-sold/package.json         |  11 +-
 .../aggregate-units-sold/webpack.config.js    |   6 +-
 samples/grids/pivot-grid/basic/package.json   |  11 +-
 .../grids/pivot-grid/basic/webpack.config.js  |   6 +-
 .../data-persistence-noop/package.json        |  11 +-
 .../data-persistence-noop/webpack.config.js   |   6 +-
 .../pivot-grid/data-selector/package.json     |  11 +-
 .../data-selector/webpack.config.js           |   6 +-
 .../grids/pivot-grid/features/package.json    |  11 +-
 .../pivot-grid/features/webpack.config.js     |   6 +-
 samples/grids/pivot-grid/remote/package.json  |  11 +-
 .../grids/pivot-grid/remote/webpack.config.js |   6 +-
 .../state-persistence-about/package.json      |  11 +-
 .../state-persistence-about/webpack.config.js |   6 +-
 .../state-persistence-main/package.json       |  11 +-
 .../state-persistence-main/webpack.config.js  |   6 +-
 .../grids/tree-grid/action-strip/package.json |  11 +-
 .../tree-grid/action-strip/webpack.config.js  |   6 +-
 .../advanced-filtering-options/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../advanced-filtering-style/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../cell-editing-sample/package.json          |  11 +-
 .../cell-editing-sample/webpack.config.js     |   6 +-
 .../cell-editing-styling/package.json         |  11 +-
 .../cell-editing-styling/webpack.config.js    |   6 +-
 .../cell-selection-mode/package.json          |  11 +-
 .../cell-selection-mode/webpack.config.js     |   6 +-
 .../cell-selection-style/package.json         |  11 +-
 .../cell-selection-style/webpack.config.js    |   6 +-
 .../clipboard-operations/package.json         |  11 +-
 .../clipboard-operations/webpack.config.js    |   6 +-
 .../tree-grid/column-auto-sizing/package.json |  11 +-
 .../column-auto-sizing/webpack.config.js      |   6 +-
 .../column-collapsible-groups/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../tree-grid/column-data-types/package.json  |  11 +-
 .../column-data-types/webpack.config.js       |   6 +-
 .../column-hiding-toolbar-style/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-hiding-toolbar/package.json        |  11 +-
 .../column-hiding-toolbar/webpack.config.js   |   6 +-
 .../column-moving-options/package.json        |  11 +-
 .../column-moving-options/webpack.config.js   |   6 +-
 .../column-moving-styles/package.json         |  11 +-
 .../column-moving-styles/webpack.config.js    |   6 +-
 .../column-pinning-options/package.json       |  11 +-
 .../column-pinning-options/webpack.config.js  |   6 +-
 .../column-pinning-right-side/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-pinning-styles/package.json        |  11 +-
 .../column-pinning-styles/webpack.config.js   |   6 +-
 .../column-pinning-toolbar/package.json       |  11 +-
 .../column-pinning-toolbar/webpack.config.js  |   6 +-
 .../tree-grid/column-pinning/package.json     |  11 +-
 .../column-pinning/webpack.config.js          |   6 +-
 .../column-resize-styling/package.json        |  11 +-
 .../column-resize-styling/webpack.config.js   |   6 +-
 .../tree-grid/column-resizing/package.json    |  11 +-
 .../column-resizing/webpack.config.js         |   6 +-
 .../column-selection-group/package.json       |  11 +-
 .../column-selection-group/webpack.config.js  |   6 +-
 .../column-selection-mode/package.json        |  11 +-
 .../column-selection-mode/webpack.config.js   |   6 +-
 .../column-selection-style/package.json       |  11 +-
 .../column-selection-style/webpack.config.js  |   6 +-
 .../column-selection-styles/package.json      |  11 +-
 .../column-selection-styles/webpack.config.js |   6 +-
 .../column-sorting-indicators/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../column-sorting-options/package.json       |  11 +-
 .../column-sorting-options/webpack.config.js  |   6 +-
 .../column-sorting-style/package.json         |  11 +-
 .../column-sorting-style/webpack.config.js    |   6 +-
 .../conditional-cell-style-1/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../conditional-cell-style-2/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../conditional-row-selectors/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../tree-grid/custom-filtering/package.json   |  11 +-
 .../custom-filtering/webpack.config.js        |   6 +-
 .../data-exporting-indicator/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../tree-grid/data-searching/package.json     |  11 +-
 .../data-searching/webpack.config.js          |   6 +-
 .../data-summaries-custom/package.json        |  11 +-
 .../data-summaries-custom/webpack.config.js   |   6 +-
 .../data-summary-children/package.json        |  11 +-
 .../data-summary-children/webpack.config.js   |   6 +-
 .../data-summary-formatter/package.json       |  11 +-
 .../data-summary-formatter/webpack.config.js  |   6 +-
 .../data-summary-options-styling/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../data-summary-options/package.json         |  11 +-
 .../data-summary-options/webpack.config.js    |   6 +-
 .../data-summary-template/package.json        |  11 +-
 .../data-summary-template/webpack.config.js   |   6 +-
 .../tree-grid/editing-columns/package.json    |  11 +-
 .../editing-columns/webpack.config.js         |   6 +-
 .../tree-grid/editing-events/package.json     |  11 +-
 .../editing-events/webpack.config.js          |   6 +-
 .../tree-grid/editing-lifecycle/package.json  |  11 +-
 .../editing-lifecycle/webpack.config.js       |   6 +-
 .../tree-grid/excel-exporting/package.json    |  11 +-
 .../excel-exporting/webpack.config.js         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../excel-style-filtering-style/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../tree-grid/filtering-options/package.json  |  11 +-
 .../filtering-options/webpack.config.js       |   6 +-
 .../tree-grid/filtering-style/package.json    |  11 +-
 .../filtering-style/webpack.config.js         |   6 +-
 samples/grids/tree-grid/finjs/package.json    |  13 +-
 .../grids/tree-grid/finjs/webpack.config.js   |   6 +-
 .../keyboard-custom-navigation/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 .../keyboard-navigation-guide/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../layout-display-density/package.json       |  11 +-
 .../layout-display-density/webpack.config.js  |   6 +-
 .../tree-grid/load-on-demand/package.json     |  11 +-
 .../load-on-demand/webpack.config.js          |   6 +-
 .../multi-cell-selection-mode/package.json    |  11 +-
 .../webpack.config.js                         |   6 +-
 .../multi-column-headers-export/package.json  |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../multi-column-headers-styling/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../tree-grid/overview-styling/package.json   |  11 +-
 .../overview-styling/webpack.config.js        |   6 +-
 samples/grids/tree-grid/overview/package.json |  11 +-
 .../tree-grid/overview/webpack.config.js      |   6 +-
 .../grids/tree-grid/row-adding/package.json   |  11 +-
 .../tree-grid/row-adding/webpack.config.js    |   6 +-
 .../grids/tree-grid/row-classes/package.json  |  11 +-
 .../tree-grid/row-classes/webpack.config.js   |   6 +-
 .../tree-grid/row-drag-base/package.json      |  11 +-
 .../tree-grid/row-drag-base/webpack.config.js |   6 +-
 .../row-editing-options/package.json          |  11 +-
 .../row-editing-options/webpack.config.js     |   6 +-
 .../tree-grid/row-editing-style/package.json  |  11 +-
 .../row-editing-style/webpack.config.js       |   6 +-
 .../tree-grid/row-paging-basic/package.json   |  11 +-
 .../row-paging-basic/webpack.config.js        |   6 +-
 .../tree-grid/row-paging-options/package.json |  11 +-
 .../row-paging-options/webpack.config.js      |   6 +-
 .../tree-grid/row-paging-style/package.json   |  11 +-
 .../row-paging-style/webpack.config.js        |   6 +-
 .../row-pinning-extra-column/package.json     |  11 +-
 .../webpack.config.js                         |   6 +-
 .../row-pinning-options/package.json          |  11 +-
 .../row-pinning-options/webpack.config.js     |   6 +-
 .../tree-grid/row-pinning-style/package.json  |  11 +-
 .../row-pinning-style/webpack.config.js       |   6 +-
 .../grids/tree-grid/row-reorder/package.json  |  11 +-
 .../tree-grid/row-reorder/webpack.config.js   |   6 +-
 .../tree-grid/row-selection-mode/package.json |  11 +-
 .../row-selection-mode/webpack.config.js      |   6 +-
 .../row-selection-template-excel/package.json |  11 +-
 .../webpack.config.js                         |   6 +-
 .../package.json                              |  11 +-
 .../webpack.config.js                         |   6 +-
 .../grids/tree-grid/row-styles/package.json   |  11 +-
 .../tree-grid/row-styles/webpack.config.js    |   6 +-
 .../state-persistence-about/package.json      |  11 +-
 .../state-persistence-about/webpack.config.js |   6 +-
 .../state-persistence-main/package.json       |  11 +-
 .../state-persistence-main/webpack.config.js  |   6 +-
 .../tree-grid/toolbar-sample-1/package.json   |  11 +-
 .../toolbar-sample-1/webpack.config.js        |   6 +-
 .../tree-grid/toolbar-sample-2/package.json   |  11 +-
 .../toolbar-sample-2/webpack.config.js        |   6 +-
 .../tree-grid/toolbar-sample-3/package.json   |  11 +-
 .../toolbar-sample-3/webpack.config.js        |   6 +-
 .../tree-grid/toolbar-sample-4/package.json   |  11 +-
 .../toolbar-sample-4/webpack.config.js        |   6 +-
 .../tree-grid/toolbar-style/package.json      |  11 +-
 .../tree-grid/toolbar-style/webpack.config.js |   6 +-
 .../using-primary-foreign-keys/package.json   |  11 +-
 .../webpack.config.js                         |   6 +-
 samples/grids/tree/basic-example/package.json |   3 +-
 .../tree/basic-example/webpack.config.js      |   6 +-
 .../load-on-demand-virtualized/package.json   |   3 +-
 .../webpack.config.js                         |   6 +-
 .../grids/tree/load-on-demand/package.json    |   3 +-
 .../tree/load-on-demand/webpack.config.js     |   6 +-
 samples/inputs/badge/outlined/package.json    |   3 +-
 .../inputs/badge/outlined/webpack.config.js   |   6 +-
 samples/inputs/badge/shape/package.json       |   3 +-
 samples/inputs/badge/shape/webpack.config.js  |   6 +-
 samples/inputs/badge/variants/package.json    |   3 +-
 .../inputs/badge/variants/webpack.config.js   |   6 +-
 .../button-group/alignment/package.json       |   3 +-
 .../button-group/alignment/webpack.config.js  |   6 +-
 .../inputs/button-group/overview/package.json |   3 +-
 .../button-group/overview/webpack.config.js   |   6 +-
 .../button-group/selection/package.json       |   3 +-
 .../button-group/selection/webpack.config.js  |   6 +-
 samples/inputs/button-group/size/package.json |   3 +-
 .../button-group/size/webpack.config.js       |   6 +-
 .../inputs/button-group/styling/package.json  |   3 +-
 .../button-group/styling/webpack.config.js    |   6 +-
 samples/inputs/button/contained/package.json  |   3 +-
 .../inputs/button/contained/webpack.config.js |   6 +-
 samples/inputs/button/download/package.json   |   3 +-
 .../inputs/button/download/webpack.config.js  |   6 +-
 samples/inputs/button/fab/package.json        |   3 +-
 samples/inputs/button/fab/webpack.config.js   |   6 +-
 samples/inputs/button/flat/package.json       |   3 +-
 samples/inputs/button/flat/webpack.config.js  |   6 +-
 samples/inputs/button/outlined/package.json   |   3 +-
 .../inputs/button/outlined/webpack.config.js  |   6 +-
 samples/inputs/button/overview/package.json   |   3 +-
 .../inputs/button/overview/webpack.config.js  |   6 +-
 samples/inputs/button/size/package.json       |   3 +-
 samples/inputs/button/size/webpack.config.js  |   6 +-
 samples/inputs/button/styling/package.json    |   3 +-
 .../inputs/button/styling/webpack.config.js   |   6 +-
 samples/inputs/checkbox/checking/package.json |   3 +-
 .../checkbox/checking/webpack.config.js       |   6 +-
 samples/inputs/checkbox/disabled/package.json |   3 +-
 .../checkbox/disabled/webpack.config.js       |   6 +-
 .../checkbox/indeterminate/package.json       |   3 +-
 .../checkbox/indeterminate/webpack.config.js  |   6 +-
 samples/inputs/checkbox/label/package.json    |   3 +-
 .../inputs/checkbox/label/webpack.config.js   |   6 +-
 samples/inputs/checkbox/overview/package.json |   3 +-
 .../checkbox/overview/webpack.config.js       |   6 +-
 samples/inputs/chip/multiple/package.json     |   3 +-
 .../inputs/chip/multiple/webpack.config.js    |   6 +-
 samples/inputs/chip/overview/package.json     |   3 +-
 .../inputs/chip/overview/webpack.config.js    |   6 +-
 samples/inputs/chip/size/package.json         |   3 +-
 samples/inputs/chip/size/webpack.config.js    |   6 +-
 samples/inputs/chip/styling/package.json      |   3 +-
 samples/inputs/chip/styling/webpack.config.js |   6 +-
 samples/inputs/chip/variants/package.json     |   3 +-
 .../inputs/chip/variants/webpack.config.js    |   6 +-
 .../dynamic/package.json                      |   3 +-
 .../dynamic/webpack.config.js                 |   6 +-
 .../indeterminate/package.json                |   3 +-
 .../indeterminate/webpack.config.js           |   6 +-
 .../simple/package.json                       |   3 +-
 .../simple/webpack.config.js                  |   6 +-
 .../styling/package.json                      |   3 +-
 .../styling/webpack.config.js                 |   6 +-
 .../inputs/color-editor/overview/package.json |   7 +-
 .../color-editor/overview/webpack.config.js   |   6 +-
 samples/inputs/combo/features/package.json    |   3 +-
 .../inputs/combo/features/webpack.config.js   |   6 +-
 samples/inputs/combo/overview/package.json    |   3 +-
 .../inputs/combo/overview/webpack.config.js   |   6 +-
 samples/inputs/combo/selection/package.json   |   3 +-
 .../inputs/combo/selection/webpack.config.js  |   6 +-
 samples/inputs/combo/simplified/package.json  |   3 +-
 .../inputs/combo/simplified/webpack.config.js |   6 +-
 samples/inputs/combo/styling/package.json     |   3 +-
 .../inputs/combo/styling/webpack.config.js    |   6 +-
 samples/inputs/combo/templates/package.json   |   3 +-
 .../inputs/combo/templates/webpack.config.js  |   6 +-
 .../input-format-display-format/package.json  |   3 +-
 .../webpack.config.js                         |   6 +-
 .../min-max-value/package.json                |   3 +-
 .../min-max-value/webpack.config.js           |   6 +-
 .../date-time-input/overview/package.json     |   3 +-
 .../overview/webpack.config.js                |   6 +-
 .../date-time-input/step-up-down/package.json |   3 +-
 .../step-up-down/webpack.config.js            |   6 +-
 samples/inputs/dropdown/group/package.json    |   3 +-
 .../inputs/dropdown/group/webpack.config.js   |   6 +-
 samples/inputs/dropdown/header/package.json   |   3 +-
 .../inputs/dropdown/header/webpack.config.js  |   6 +-
 samples/inputs/dropdown/item/package.json     |   3 +-
 .../inputs/dropdown/item/webpack.config.js    |   6 +-
 samples/inputs/dropdown/overview/package.json |   3 +-
 .../dropdown/overview/webpack.config.js       |   6 +-
 samples/inputs/dropdown/position/package.json |   3 +-
 .../dropdown/position/webpack.config.js       |   6 +-
 samples/inputs/dropdown/styling/package.json  |   3 +-
 .../inputs/dropdown/styling/webpack.config.js |   6 +-
 samples/inputs/dropdown/target/package.json   |   3 +-
 .../inputs/dropdown/target/webpack.config.js  |   6 +-
 samples/inputs/icon-button/size/package.json  |   3 +-
 .../inputs/icon-button/size/webpack.config.js |   6 +-
 .../inputs/icon-button/styling/package.json   |   3 +-
 .../icon-button/styling/webpack.config.js     |   6 +-
 .../inputs/icon-button/variant/package.json   |   3 +-
 .../icon-button/variant/webpack.config.js     |   6 +-
 samples/inputs/input/helper-text/package.json |   3 +-
 .../input/helper-text/webpack.config.js       |   6 +-
 samples/inputs/input/overview/package.json    |   3 +-
 .../inputs/input/overview/webpack.config.js   |   6 +-
 .../inputs/input/prefix-suffix/package.json   |   3 +-
 .../input/prefix-suffix/webpack.config.js     |   6 +-
 samples/inputs/input/size/package.json        |   3 +-
 samples/inputs/input/size/webpack.config.js   |   6 +-
 samples/inputs/input/styling/package.json     |   3 +-
 .../inputs/input/styling/webpack.config.js    |   6 +-
 .../dynamic/package.json                      |   3 +-
 .../dynamic/webpack.config.js                 |   6 +-
 .../simple/package.json                       |   3 +-
 .../simple/webpack.config.js                  |   6 +-
 .../striped/package.json                      |   3 +-
 .../striped/webpack.config.js                 |   6 +-
 .../styling/package.json                      |   3 +-
 .../styling/webpack.config.js                 |   6 +-
 .../types/package.json                        |   3 +-
 .../types/webpack.config.js                   |   6 +-
 .../mask-input/applying-mask/package.json     |   3 +-
 .../applying-mask/webpack.config.js           |   6 +-
 .../inputs/mask-input/overview/package.json   |   3 +-
 .../mask-input/overview/webpack.config.js     |   6 +-
 .../mask-input/value-modes/package.json       |   3 +-
 .../mask-input/value-modes/webpack.config.js  |   6 +-
 samples/inputs/radio/alignment/package.json   |   3 +-
 .../inputs/radio/alignment/webpack.config.js  |   6 +-
 samples/inputs/radio/disabled/package.json    |   3 +-
 .../inputs/radio/disabled/webpack.config.js   |   6 +-
 samples/inputs/radio/group/package.json       |   3 +-
 samples/inputs/radio/group/webpack.config.js  |   6 +-
 samples/inputs/radio/invalid/package.json     |   3 +-
 .../inputs/radio/invalid/webpack.config.js    |   6 +-
 samples/inputs/radio/label/package.json       |   3 +-
 samples/inputs/radio/label/webpack.config.js  |   6 +-
 samples/inputs/radio/styling/package.json     |   3 +-
 .../inputs/radio/styling/webpack.config.js    |   6 +-
 samples/inputs/rating/basic/package.json      |   3 +-
 samples/inputs/rating/basic/webpack.config.js |   6 +-
 samples/inputs/rating/custom/package.json     |   3 +-
 .../inputs/rating/custom/webpack.config.js    |   6 +-
 samples/inputs/rating/empty/package.json      |   3 +-
 samples/inputs/rating/empty/webpack.config.js |   6 +-
 .../rating/single-selection/package.json      |   3 +-
 .../rating/single-selection/webpack.config.js |   6 +-
 samples/inputs/rating/styling/package.json    |   3 +-
 .../inputs/rating/styling/webpack.config.js   |   6 +-
 samples/inputs/ripple/button/package.json     |   3 +-
 .../inputs/ripple/button/webpack.config.js    |   6 +-
 samples/inputs/ripple/color/package.json      |   3 +-
 samples/inputs/ripple/color/webpack.config.js |   6 +-
 samples/inputs/select/group/package.json      |   3 +-
 samples/inputs/select/group/webpack.config.js |   6 +-
 samples/inputs/select/header/package.json     |   3 +-
 .../inputs/select/header/webpack.config.js    |   6 +-
 samples/inputs/select/item/package.json       |   3 +-
 samples/inputs/select/item/webpack.config.js  |   6 +-
 samples/inputs/select/overview/package.json   |   3 +-
 .../inputs/select/overview/webpack.config.js  |   6 +-
 samples/inputs/select/styling/package.json    |   3 +-
 .../inputs/select/styling/webpack.config.js   |   6 +-
 .../inputs/slider/constraints/package.json    |   3 +-
 .../slider/constraints/webpack.config.js      |   6 +-
 samples/inputs/slider/disabled/package.json   |   3 +-
 .../inputs/slider/disabled/webpack.config.js  |   6 +-
 samples/inputs/slider/discrete/package.json   |   3 +-
 .../inputs/slider/discrete/webpack.config.js  |   6 +-
 samples/inputs/slider/labels/package.json     |   3 +-
 .../inputs/slider/labels/webpack.config.js    |   6 +-
 samples/inputs/slider/overview/package.json   |   3 +-
 .../inputs/slider/overview/webpack.config.js  |   6 +-
 samples/inputs/slider/styling/package.json    |   3 +-
 .../inputs/slider/styling/webpack.config.js   |   6 +-
 .../inputs/slider/tick-labels/package.json    |   3 +-
 .../slider/tick-labels/webpack.config.js      |   6 +-
 samples/inputs/slider/ticks/package.json      |   3 +-
 samples/inputs/slider/ticks/webpack.config.js |   6 +-
 .../inputs/slider/value-format/package.json   |   3 +-
 .../slider/value-format/webpack.config.js     |   6 +-
 samples/inputs/slider/value/package.json      |   3 +-
 samples/inputs/slider/value/webpack.config.js |   6 +-
 samples/inputs/switches/checking/package.json |   3 +-
 .../switches/checking/webpack.config.js       |   6 +-
 samples/inputs/switches/disabled/package.json |   3 +-
 .../switches/disabled/webpack.config.js       |   6 +-
 samples/inputs/switches/label/package.json    |   3 +-
 .../inputs/switches/label/webpack.config.js   |   6 +-
 samples/inputs/switches/overview/package.json |   3 +-
 .../switches/overview/webpack.config.js       |   6 +-
 .../textarea/form-integration/package.json    |   3 +-
 .../form-integration/webpack.config.js        |   6 +-
 samples/inputs/textarea/overview/package.json |   3 +-
 .../textarea/overview/webpack.config.js       |   6 +-
 samples/inputs/textarea/resize/package.json   |   3 +-
 .../inputs/textarea/resize/webpack.config.js  |   6 +-
 samples/inputs/textarea/slots/package.json    |   3 +-
 .../inputs/textarea/slots/webpack.config.js   |   6 +-
 samples/inputs/textarea/styling/package.json  |   3 +-
 .../inputs/textarea/styling/webpack.config.js |   6 +-
 .../accordion/customization/package.json      |   3 +-
 .../accordion/customization/webpack.config.js |   6 +-
 .../accordion/nested-scenario/package.json    |   3 +-
 .../nested-scenario/webpack.config.js         |   6 +-
 .../layouts/accordion/overview/package.json   |   3 +-
 .../accordion/overview/webpack.config.js      |   6 +-
 samples/layouts/avatar/icon/package.json      |   3 +-
 samples/layouts/avatar/icon/webpack.config.js |   6 +-
 samples/layouts/avatar/image/package.json     |   3 +-
 .../layouts/avatar/image/webpack.config.js    |   6 +-
 samples/layouts/avatar/initials/package.json  |   3 +-
 .../layouts/avatar/initials/webpack.config.js |   6 +-
 samples/layouts/avatar/shape/package.json     |   3 +-
 .../layouts/avatar/shape/webpack.config.js    |   6 +-
 samples/layouts/avatar/size/package.json      |   3 +-
 samples/layouts/avatar/size/webpack.config.js |   6 +-
 samples/layouts/card/horizontal/package.json  |   3 +-
 .../layouts/card/horizontal/webpack.config.js |   6 +-
 samples/layouts/card/integration/package.json |   3 +-
 .../card/integration/webpack.config.js        |   6 +-
 samples/layouts/card/overview/package.json    |   3 +-
 .../layouts/card/overview/webpack.config.js   |   6 +-
 .../layouts/card/semi-horizontal/package.json |   3 +-
 .../card/semi-horizontal/webpack.config.js    |   6 +-
 samples/layouts/card/styling/package.json     |   3 +-
 .../layouts/card/styling/webpack.config.js    |   6 +-
 .../layouts/carousel/animations/package.json  |   3 +-
 .../carousel/animations/webpack.config.js     |   6 +-
 .../layouts/carousel/components/package.json  |   3 +-
 .../carousel/components/webpack.config.js     |   6 +-
 .../layouts/carousel/overview/package.json    |   3 +-
 .../carousel/overview/webpack.config.js       |   6 +-
 .../layouts/carousel/thumbnail/package.json   |   3 +-
 .../carousel/thumbnail/webpack.config.js      |   6 +-
 samples/layouts/divider/dashed/package.json   |   3 +-
 .../layouts/divider/dashed/webpack.config.js  |   6 +-
 samples/layouts/divider/middle/package.json   |   3 +-
 .../layouts/divider/middle/webpack.config.js  |   6 +-
 samples/layouts/divider/overview/package.json |   3 +-
 .../divider/overview/webpack.config.js        |   6 +-
 samples/layouts/divider/select/package.json   |   3 +-
 .../layouts/divider/select/webpack.config.js  |   6 +-
 samples/layouts/divider/vertical/package.json |   3 +-
 .../divider/vertical/webpack.config.js        |   6 +-
 .../add-content-runtime/package.json          |   3 +-
 .../add-content-runtime/webpack.config.js     |   6 +-
 .../contained-in-boundaries/package.json      |   3 +-
 .../contained-in-boundaries/webpack.config.js |   6 +-
 .../customize-buttons/package.json            |   3 +-
 .../customize-buttons/webpack.config.js       |   6 +-
 .../embedding-frames/package.json             |   5 +-
 .../embedding-frames/webpack.config.js        |   6 +-
 .../dock-manager/focus-panes/package.json     |   3 +-
 .../focus-panes/webpack.config.js             |   6 +-
 .../hide-pane-headers/package.json            |   3 +-
 .../hide-pane-headers/webpack.config.js       |   6 +-
 .../dock-manager/hiding-panes/package.json    |   5 +-
 .../hiding-panes/webpack.config.js            |   6 +-
 .../dock-manager/overview/package.json        |   5 +-
 .../dock-manager/overview/webpack.config.js   |   6 +-
 .../dock-manager/proximity-dock/package.json  |   3 +-
 .../proximity-dock/webpack.config.js          |   6 +-
 .../split-pane-fixed-size/package.json        |   3 +-
 .../split-pane-fixed-size/webpack.config.js   |   6 +-
 .../layouts/dock-manager/styling/package.json |   5 +-
 .../dock-manager/styling/webpack.config.js    |   6 +-
 .../toggle-inner-dock/package.json            |   3 +-
 .../toggle-inner-dock/webpack.config.js       |   6 +-
 .../dock-manager/updating-panes/package.json  |  11 +-
 .../updating-panes/webpack.config.js          |   6 +-
 .../component-customization/package.json      |   3 +-
 .../component-customization/webpack.config.js |   6 +-
 .../properties-and-events/package.json        |   3 +-
 .../properties-and-events/webpack.config.js   |   6 +-
 .../expansion-panel/styling/package.json      |   3 +-
 .../expansion-panel/styling/webpack.config.js |   6 +-
 .../expansion-panel/usage/package.json        |   3 +-
 .../expansion-panel/usage/webpack.config.js   |   6 +-
 samples/layouts/icon/sizing/package.json      |   3 +-
 samples/layouts/icon/sizing/webpack.config.js |   6 +-
 samples/layouts/icon/styling/package.json     |   3 +-
 .../layouts/icon/styling/webpack.config.js    |   6 +-
 .../layouts/stepper/animations/package.json   |   3 +-
 .../stepper/animations/webpack.config.js      |   6 +-
 samples/layouts/stepper/linear/package.json   |   3 +-
 .../layouts/stepper/linear/webpack.config.js  |   6 +-
 .../layouts/stepper/orientation/package.json  |   3 +-
 .../stepper/orientation/webpack.config.js     |   6 +-
 samples/layouts/stepper/overview/package.json |   3 +-
 .../stepper/overview/webpack.config.js        |   6 +-
 .../layouts/stepper/steptypes/package.json    |   3 +-
 .../stepper/steptypes/webpack.config.js       |   6 +-
 samples/layouts/tabs/alignment/package.json   |   3 +-
 .../layouts/tabs/alignment/webpack.config.js  |   6 +-
 samples/layouts/tabs/overview/package.json    |   3 +-
 .../layouts/tabs/overview/webpack.config.js   |   6 +-
 .../layouts/tabs/prefix-suffix/package.json   |   3 +-
 .../tabs/prefix-suffix/webpack.config.js      |   6 +-
 samples/layouts/tabs/scrolling/package.json   |   3 +-
 .../layouts/tabs/scrolling/webpack.config.js  |   6 +-
 .../geo-map/binding-data-csv/package.json     |   9 +-
 .../binding-data-csv/webpack.config.js        |   6 +-
 .../binding-data-json-points/package.json     |   9 +-
 .../webpack.config.js                         |   6 +-
 .../geo-map/binding-data-model/package.json   |   9 +-
 .../binding-data-model/webpack.config.js      |   6 +-
 .../binding-multiple-shapes/package.json      |   9 +-
 .../binding-multiple-shapes/webpack.config.js |   6 +-
 .../binding-multiple-sources/package.json     |   9 +-
 .../webpack.config.js                         |   6 +-
 .../geo-map/binding-shp-points/package.json   |   9 +-
 .../binding-shp-points/webpack.config.js      |   6 +-
 .../geo-map/binding-shp-polygons/package.json |   9 +-
 .../binding-shp-polygons/webpack.config.js    |   6 +-
 .../binding-shp-polylines/package.json        |   9 +-
 .../binding-shp-polylines/webpack.config.js   |   6 +-
 .../maps/geo-map/custom-tooltips/package.json |   9 +-
 .../geo-map/custom-tooltips/webpack.config.js |   6 +-
 .../geo-map/display-all-imagery/package.json  |   9 +-
 .../display-all-imagery/webpack.config.js     |   6 +-
 .../geo-map/display-bing-imagery/package.json |   9 +-
 .../display-bing-imagery/webpack.config.js    |   6 +-
 .../geo-map/display-esri-imagery/package.json |   9 +-
 .../display-esri-imagery/webpack.config.js    |   6 +-
 .../geo-map/display-heat-imagery/package.json |   9 +-
 .../display-heat-imagery/webpack.config.js    |   6 +-
 .../geo-map/display-osm-imagery/package.json  |   9 +-
 .../display-osm-imagery/webpack.config.js     |   6 +-
 .../maps/geo-map/marker-template/package.json |   9 +-
 .../geo-map/marker-template/webpack.config.js |   6 +-
 samples/maps/geo-map/marker-type/package.json |   9 +-
 .../geo-map/marker-type/webpack.config.js     |   6 +-
 samples/maps/geo-map/navigation/package.json  |   9 +-
 .../maps/geo-map/navigation/webpack.config.js |   6 +-
 samples/maps/geo-map/overview/package.json    |   9 +-
 .../maps/geo-map/overview/webpack.config.js   |   6 +-
 .../maps/geo-map/shape-styling/package.json   |   9 +-
 .../geo-map/shape-styling/webpack.config.js   |   6 +-
 .../maps/geo-map/synchronization/package.json |   9 +-
 .../geo-map/synchronization/webpack.config.js |   6 +-
 .../geo-map/triangulating-data/package.json   |   9 +-
 .../triangulating-data/webpack.config.js      |   6 +-
 .../type-scatter-area-series/package.json     |   9 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-bubble-series/package.json   |   9 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-contour-series/package.json  |   9 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-density-series/package.json  |   9 +-
 .../webpack.config.js                         |   6 +-
 .../type-scatter-symbol-series/package.json   |   9 +-
 .../webpack.config.js                         |   6 +-
 .../type-shape-polygon-series/package.json    |   9 +-
 .../webpack.config.js                         |   6 +-
 .../type-shape-polyline-series/package.json   |   9 +-
 .../webpack.config.js                         |   6 +-
 samples/menus/nav-bar/overview/package.json   |   3 +-
 .../menus/nav-bar/overview/webpack.config.js  |   6 +-
 samples/menus/nav-bar/styling/package.json    |   3 +-
 .../menus/nav-bar/styling/webpack.config.js   |   6 +-
 .../nav-drawer/add-drawer-items/package.json  |   3 +-
 .../add-drawer-items/webpack.config.js        |   6 +-
 .../menus/nav-drawer/add-mini/package.json    |   3 +-
 .../nav-drawer/add-mini/webpack.config.js     |   6 +-
 .../add-positions-navbar/package.json         |   3 +-
 .../add-positions-navbar/webpack.config.js    |   6 +-
 samples/menus/nav-drawer/styling/package.json |   3 +-
 .../nav-drawer/styling/webpack.config.js      |   6 +-
 .../banner-advanced-sample/package.json       |   3 +-
 .../banner-advanced-sample/webpack.config.js  |   6 +-
 .../banner/banner-sample-1/package.json       |   3 +-
 .../banner/banner-sample-1/webpack.config.js  |   6 +-
 .../banner/banner-sample-2/package.json       |   3 +-
 .../banner/banner-sample-2/webpack.config.js  |   6 +-
 .../banner/banner-styling/package.json        |   3 +-
 .../banner/banner-styling/webpack.config.js   |   6 +-
 .../dialog/closing-variations/package.json    |   3 +-
 .../closing-variations/webpack.config.js      |   6 +-
 .../notifications/dialog/form/package.json    |   3 +-
 .../dialog/form/webpack.config.js             |   6 +-
 .../dialog/overview/package.json              |   3 +-
 .../dialog/overview/webpack.config.js         |   6 +-
 .../notifications/dialog/styling/package.json |   3 +-
 .../dialog/styling/webpack.config.js          |   6 +-
 .../snackbar/action-text/package.json         |   3 +-
 .../snackbar/action-text/webpack.config.js    |   6 +-
 .../snackbar/display-time/package.json        |   3 +-
 .../snackbar/display-time/webpack.config.js   |   6 +-
 .../snackbar/overview/package.json            |   3 +-
 .../snackbar/overview/webpack.config.js       |   6 +-
 .../snackbar/styling/package.json             |   3 +-
 .../snackbar/styling/webpack.config.js        |   6 +-
 .../notifications/toast/overview/package.json |   3 +-
 .../toast/overview/webpack.config.js          |   6 +-
 .../toast/properties/package.json             |   3 +-
 .../toast/properties/webpack.config.js        |   6 +-
 .../notifications/toast/styling/package.json  |   3 +-
 .../toast/styling/webpack.config.js           |   6 +-
 .../calendar/disabled-dates/package.json      |   3 +-
 .../calendar/disabled-dates/webpack.config.js |   6 +-
 .../calendar/formatting/package.json          |   3 +-
 .../calendar/formatting/webpack.config.js     |   6 +-
 .../scheduling/calendar/header/package.json   |   3 +-
 .../calendar/header/webpack.config.js         |   6 +-
 .../calendar/multiple-months/package.json     |   3 +-
 .../multiple-months/webpack.config.js         |   6 +-
 .../calendar/multiple-selection/package.json  |   3 +-
 .../multiple-selection/webpack.config.js      |   6 +-
 .../scheduling/calendar/overview/package.json |   3 +-
 .../calendar/overview/webpack.config.js       |   6 +-
 .../calendar/range-selection/package.json     |   3 +-
 .../range-selection/webpack.config.js         |   6 +-
 samples/scheduling/calendar/size/package.json |   3 +-
 .../calendar/size/webpack.config.js           |   6 +-
 .../calendar/special-dates/package.json       |   3 +-
 .../calendar/special-dates/webpack.config.js  |   6 +-
 .../scheduling/calendar/styling/package.json  |   3 +-
 .../calendar/styling/webpack.config.js        |   6 +-
 .../calendar/week-numbers/package.json        |   3 +-
 .../calendar/week-numbers/webpack.config.js   |   6 +-
 .../date-picker/dialog-mode/package.json      |   3 +-
 .../date-picker/dialog-mode/webpack.config.js |   6 +-
 .../scheduling/date-picker/form/package.json  |   3 +-
 .../date-picker/form/webpack.config.js        |   6 +-
 .../date-picker/format/package.json           |   3 +-
 .../date-picker/format/webpack.config.js      |   6 +-
 .../date-picker/overview/package.json         |   3 +-
 .../date-picker/overview/webpack.config.js    |   6 +-
 .../date-picker/styling/package.json          |   3 +-
 .../date-picker/styling/webpack.config.js     |   6 +-
 1758 files changed, 7634 insertions(+), 4998 deletions(-)

diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js
index f30ffb858f..bff6db5247 100644
--- a/browser/tasks/gulp-samples.js
+++ b/browser/tasks/gulp-samples.js
@@ -976,18 +976,18 @@ function updateIG(cb) {
     // { version: "3.2.12",  name:               "igniteui-webcomponents-core" },   // PUBLIC NPM
     let packageUpgrades = [
         // these IG packages are often updated:
-        { version: "5.2.0", name: "igniteui-webcomponents-core" },
-        { version: "5.2.0", name: "igniteui-webcomponents-charts" },
-        { version: "5.2.0", name: "igniteui-webcomponents-excel" },
-        { version: "5.2.0", name: "igniteui-webcomponents-gauges" },
-        { version: "5.2.0", name: "igniteui-webcomponents-grids" },
-        { version: "5.2.0", name: "igniteui-webcomponents-inputs" },
-        { version: "5.2.0", name: "igniteui-webcomponents-layouts" },
-        { version: "5.2.0", name: "igniteui-webcomponents-maps" },
-        { version: "5.2.0", name: "igniteui-webcomponents-spreadsheet-chart-adapter" },
-        { version: "5.2.0", name: "igniteui-webcomponents-spreadsheet" },
-        { version: "5.2.0", name: "igniteui-webcomponents-datasources" },
-        { version: "5.2.0", name: "igniteui-webcomponents-dashboards" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-core" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-charts" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-excel" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-gauges" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-grids" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-inputs" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-layouts" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-maps" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-spreadsheet-chart-adapter" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-spreadsheet" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-datasources" },
+        { version: "5.2.1-beta.0", name: "igniteui-webcomponents-dashboards" },
         // these IG packages are sometimes updated:
         { version: "5.2.1" , name: "igniteui-webcomponents" },
         { version: "1.16.0", name: "igniteui-dockmanager" },
diff --git a/browser/templates/sample/package.json b/browser/templates/sample/package.json
index 0c0fc2c093..1da091adb0 100644
--- a/browser/templates/sample/package.json
+++ b/browser/templates/sample/package.json
@@ -35,17 +35,17 @@
     "@types/file-saver":  { "version": "^2.0.0", "usage": "detect", "keywords": ["ExcelUtility"] },
     "file-saver":         { "version": "^1.3.8", "usage": "detect", "keywords": ["ExcelUtility"] },
     "igniteui-dockmanager":       { "version": "^1.16.0", "usage": "detect", "note": "will detect if needs to inject it by checking import statements in source of a sample" },
-    "igniteui-webcomponents-core":        { "version": "4.3.0-beta.2", "usage": "detect", "note": "will always force injecting it to a package.json "},
-    "igniteui-webcomponents-maps":        { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-charts":      { "version": "4.3.0-beta.2", "usage": "detect", "keywords": ["igniteui-webcomponents-maps", "igniteui-webcomponents-spreadsheet-chart-adapter"]  },
-    "igniteui-webcomponents-datasources": { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-gauges":      { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-spreadsheet": { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-spreadsheet-chart-adapter": { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-excel":       { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-grids":       { "version": "4.3.0-beta.2", "usage": "detect" },
-    "igniteui-webcomponents-inputs":      { "version": "4.3.0-beta.2", "usage": "detect", "keywords": ["igniteui-webcomponents-grids"] },
-    "igniteui-webcomponents-layouts":     { "version": "4.3.0-beta.2", "usage": "detect" }
+    "igniteui-webcomponents-core":        { "version": "5.2.1-beta.0", "usage": "detect", "note": "will always force injecting it to a package.json "},
+    "igniteui-webcomponents-maps":        { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-charts":      { "version": "5.2.1-beta.0", "usage": "detect", "keywords": ["igniteui-webcomponents-maps", "igniteui-webcomponents-spreadsheet-chart-adapter"]  },
+    "igniteui-webcomponents-datasources": { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-gauges":      { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-spreadsheet": { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-spreadsheet-chart-adapter": { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-excel":       { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-grids":       { "version": "5.2.1-beta.0", "usage": "detect" },
+    "igniteui-webcomponents-inputs":      { "version": "5.2.1-beta.0", "usage": "detect", "keywords": ["igniteui-webcomponents-grids"] },
+    "igniteui-webcomponents-layouts":     { "version": "5.2.1-beta.0", "usage": "detect" }
   },
   "devDependencies": {
       "@babel/cli": "^7.8.3",
diff --git a/package-lock.json b/package-lock.json
index 8d4992944f..e54153a228 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,18 +22,18 @@
         "file-saver": "^2.0.2",
         "igniteui-dockmanager": "1.16.0",
         "igniteui-webcomponents": "5.2.1",
-        "igniteui-webcomponents-charts": "5.2.0",
-        "igniteui-webcomponents-core": "5.2.0",
-        "igniteui-webcomponents-dashboards": "5.2.0",
-        "igniteui-webcomponents-datasources": "5.2.0",
-        "igniteui-webcomponents-excel": "5.2.0",
-        "igniteui-webcomponents-gauges": "5.2.0",
-        "igniteui-webcomponents-grids": "5.2.0",
-        "igniteui-webcomponents-inputs": "5.2.0",
-        "igniteui-webcomponents-layouts": "5.2.0",
-        "igniteui-webcomponents-maps": "5.2.0",
-        "igniteui-webcomponents-spreadsheet": "5.2.0",
-        "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.0",
+        "igniteui-webcomponents-charts": "5.2.1-beta.0",
+        "igniteui-webcomponents-core": "5.2.1-beta.0",
+        "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+        "igniteui-webcomponents-datasources": "5.2.1-beta.0",
+        "igniteui-webcomponents-excel": "5.2.1-beta.0",
+        "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+        "igniteui-webcomponents-grids": "5.2.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+        "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+        "igniteui-webcomponents-maps": "5.2.1-beta.0",
+        "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
+        "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.1-beta.0",
         "lit": "^3.2.0",
         "lit-html": "^3.2.0"
       },
@@ -8740,15 +8740,15 @@
       }
     },
     "node_modules/igniteui-webcomponents-charts": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-charts/-/igniteui-webcomponents-charts-5.2.0.tgz",
-      "integrity": "sha512-zPgMWklPkQcDUiUrN612PEmydvTOVHLImDXHGw6xSLJADUfe8eyzJmURe5AbvuW2qkkzWI9xpLY5kSjyFx/3yA==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-charts/-/igniteui-webcomponents-charts-5.2.1-beta.0.tgz",
+      "integrity": "sha512-TVRtoWBk8i3df3VUfe6S/K6x2agurN6Ylx0OAwWRNefQGH6oQe9yA3sDhMJ8ApRrfFMk/0EfEx1Gzolc7vJSOA==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-charts/node_modules/tslib": {
@@ -8757,9 +8757,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-core": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-core/-/igniteui-webcomponents-core-5.2.0.tgz",
-      "integrity": "sha512-tnNz5YhCe3W+oJWlUJQCIJZ61PL6cmAUKiFLmSqjFfWep55dOaZr2Y4CgzkjUQ2ysB8bsb99QmO0g+0E7HbQNQ==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-core/-/igniteui-webcomponents-core-5.2.1-beta.0.tgz",
+      "integrity": "sha512-eRGK/O+EhshVlis/x6vY/T7PQS0JFDclciQWD4tTY8dmj4zd9Miqbw5ZrUt42uVtSP2S3Ktc1teSOAEKhGzV5g==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
@@ -8774,21 +8774,21 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-dashboards": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-dashboards/-/igniteui-webcomponents-dashboards-5.2.0.tgz",
-      "integrity": "sha512-CJz76+Z7rcFNGpfJSaooXNV2ALk3iUKj4TRfmLiHQM1Tpw8o7n2q+DR2zg+XWGFwrRQGc/Ta6lAeDZDkDOCOiQ==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-dashboards/-/igniteui-webcomponents-dashboards-5.2.1-beta.0.tgz",
+      "integrity": "sha512-hy/0/enNcIMsodK1kuv78BL3JpqQggnuJyXsN7JXli9tmbJG9ptWLx2PauJ9KQC2u0/0W+PyNN8WQijvzyOO2A==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-charts": "5.2.0",
-        "igniteui-webcomponents-core": "5.2.0",
-        "igniteui-webcomponents-gauges": "5.2.0",
-        "igniteui-webcomponents-grids": "5.2.0",
-        "igniteui-webcomponents-inputs": "5.2.0",
-        "igniteui-webcomponents-layouts": "5.2.0",
-        "igniteui-webcomponents-maps": "5.2.0"
+        "igniteui-webcomponents-charts": "5.2.1-beta.0",
+        "igniteui-webcomponents-core": "5.2.1-beta.0",
+        "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+        "igniteui-webcomponents-grids": "5.2.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+        "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+        "igniteui-webcomponents-maps": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-dashboards/node_modules/tslib": {
@@ -8797,15 +8797,15 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/igniteui-webcomponents-datasources": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-datasources/-/igniteui-webcomponents-datasources-5.2.0.tgz",
-      "integrity": "sha512-Z8Q47Y/SAJEbJMwckhXLVjGKsGuZ6jDuvVWhi4Z/KTBeIVXuXSld6+uHQqr8DS+ikMQ/uUH27b6wWcHt8Kmrog==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-datasources/-/igniteui-webcomponents-datasources-5.2.1-beta.0.tgz",
+      "integrity": "sha512-qdC4eNIo0Bc5o5RiIFdwVyIwY81ZbFcIK87ASoB8H0uEduhr2dUWY9mCybX4I7mxtXhGOq7GQd2wMeszcJQiCQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-datasources/node_modules/tslib": {
@@ -8814,9 +8814,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-excel": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-excel/-/igniteui-webcomponents-excel-5.2.0.tgz",
-      "integrity": "sha512-cn8q3Yp9KuKMidz10AL10743MHSJ3WNUul0UR9G1stDChRUmfPz/Ik8MxMuP2NY3TfYzzNzzUp9laleWY4HyCw==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-excel/-/igniteui-webcomponents-excel-5.2.1-beta.0.tgz",
+      "integrity": "sha512-KfUELWXy70TguJxzkgzdb1sKsSpg5Z8cWdh6dSj6E1BR4F0jtqok7Snm2ElUDGLzR7vdQSVu74npqbOEBTYoeg==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "jszip": "^3.1.5",
@@ -8824,7 +8824,7 @@
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-excel/node_modules/tslib": {
@@ -8833,120 +8833,125 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/igniteui-webcomponents-gauges": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-gauges/-/igniteui-webcomponents-gauges-5.2.0.tgz",
-      "integrity": "sha512-X/guO5/jUsV+2vORbfTgGXpaGCI7FBR7lh1FYv8xxgZXsL7ziiW7uowjZhVeXcgv1BX1r1g+gTRzllm6mTNCNg==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-gauges/-/igniteui-webcomponents-gauges-5.2.1-beta.0.tgz",
+      "integrity": "sha512-WDFE6KsnXk6vBRdWVcVQxD1Kz2S50QEHh9Ph3b7a1iaiBB7ELoO/vJZFHt61rwZrUsu9S3/36AmlbVzCkLNHoA==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-gauges/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/igniteui-webcomponents-grids": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-grids/-/igniteui-webcomponents-grids-5.2.0.tgz",
-      "integrity": "sha512-qBLpl7uirFLuC10cyu8ERIuAt7ax95ObWf76zkeiZap6E05L4B9TfXGeZO4b8lD5+CcnVtTH0Jd1dr4+qrkcHQ==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-grids/-/igniteui-webcomponents-grids-5.2.1-beta.0.tgz",
+      "integrity": "sha512-p4KDkTTXupM0H1kGkCH0HOhPqxGiGAQa5IcxSWSS24a0Z/QOog7JP8ZLzeAP6BtxJFdi6rGVDee0vBwp+QUbTg==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0",
-        "igniteui-webcomponents-inputs": "5.2.0",
-        "igniteui-webcomponents-layouts": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+        "igniteui-webcomponents-layouts": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-grids/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/igniteui-webcomponents-inputs": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-inputs/-/igniteui-webcomponents-inputs-5.2.0.tgz",
-      "integrity": "sha512-/0oBeAu/wr8NWTD+yYBK3xP0a1w5KgQQOmuMtlT2KfB2cBPQ8iRMsQGt7yyerYFBgKnTRrjYejLbYCxEUO87PA==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-inputs/-/igniteui-webcomponents-inputs-5.2.1-beta.0.tgz",
+      "integrity": "sha512-9KoKLbugIatWxAdhnJglQTtgv7v1I/q4z0aQ9y+dNph4Ox0yXI61BJWj4wEC4hXwP6JilB+WY3NJr8S6Dw884g==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-inputs/node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/igniteui-webcomponents-layouts": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-layouts/-/igniteui-webcomponents-layouts-5.2.0.tgz",
-      "integrity": "sha512-R0IUPrkwA+kq/mFJkMrFSI2Zceq85rFx4Cgn2pL3wMAx68umfKjTAkCLuHxjSsxoIo245q5QXY1nhX/S5QBQAQ==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-layouts/-/igniteui-webcomponents-layouts-5.2.1-beta.0.tgz",
+      "integrity": "sha512-uD49i6V4ymFNMyrsqAusHDprjOAEnMAID+GnFe5pjc7uaWaWrpQ4RdIgETyzi7Pks+VP+nVBs5w0r2C9vg+BsA==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0",
-        "igniteui-webcomponents-inputs": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0",
+        "igniteui-webcomponents-inputs": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-layouts/node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/igniteui-webcomponents-maps": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-maps/-/igniteui-webcomponents-maps-5.2.0.tgz",
-      "integrity": "sha512-6mqMKWnkwkUErvnkLLIOaYbE3rP1Qv/BFLs4zi6GRlQBuDUDnHPKdmSw/RPZx70OuBSbieR3FYsjF8TFKjGZRg==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-maps/-/igniteui-webcomponents-maps-5.2.1-beta.0.tgz",
+      "integrity": "sha512-X2Xomt/oaHBdjYCCMAu70BS8NzRTscsGJsQ2GWTmPVLXiWSS03iwA1OQ0wWcb8es3YQeuG/7sx2lsaHz/NPfXg==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-charts": "5.2.0",
-        "igniteui-webcomponents-core": "5.2.0"
+        "igniteui-webcomponents-charts": "5.2.1-beta.0",
+        "igniteui-webcomponents-core": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-maps/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/igniteui-webcomponents-spreadsheet": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet/-/igniteui-webcomponents-spreadsheet-5.2.0.tgz",
-      "integrity": "sha512-0VTEKLTziqJMlsmGHCWvIzHVXuhov7FNha0aakM9sFhM6Z9Gch7RYZcX/sBYjCNQuiYqqKN3tgeSgHzTiOV0kA==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet/-/igniteui-webcomponents-spreadsheet-5.2.1-beta.0.tgz",
+      "integrity": "sha512-u0Dd0tDsiS/mwZP2Tx4wJLTb5neUKmN0ifHM+tn5rJmDk9kEdlU4IGIgJ31SC6b/oXowO7EYE3g6y0w1E43yFQ==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-core": "5.2.0",
-        "igniteui-webcomponents-excel": "5.2.0"
+        "igniteui-webcomponents-core": "5.2.1-beta.0",
+        "igniteui-webcomponents-excel": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet-chart-adapter/-/igniteui-webcomponents-spreadsheet-chart-adapter-5.2.0.tgz",
-      "integrity": "sha512-Cwp/doEgIjz0YDVhcqlecPkSnWGns8RRKqLH0LzTLhBPUgsvf5xK9W+4wIASsVLS0yqynRZ9kRXThjZ2GmRn3A==",
+      "version": "5.2.1-beta.0",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents-spreadsheet-chart-adapter/-/igniteui-webcomponents-spreadsheet-chart-adapter-5.2.1-beta.0.tgz",
+      "integrity": "sha512-Ldx1yWhyIbBiRhOLHVrUPjOSqkkgSQkxloI0Tab2LRH/a+EQ6PtERwC9i4SA/wX23tykycgagCHan9XaX+v4Qw==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "igniteui-webcomponents-charts": "5.2.0",
-        "igniteui-webcomponents-core": "5.2.0",
-        "igniteui-webcomponents-excel": "5.2.0",
-        "igniteui-webcomponents-spreadsheet": "5.2.0"
+        "igniteui-webcomponents-charts": "5.2.1-beta.0",
+        "igniteui-webcomponents-core": "5.2.1-beta.0",
+        "igniteui-webcomponents-excel": "5.2.1-beta.0",
+        "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0"
       }
     },
     "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter/node_modules/tslib": {
diff --git a/package.json b/package.json
index dda07f944d..84bee7a1df 100644
--- a/package.json
+++ b/package.json
@@ -42,18 +42,18 @@
     "file-saver": "^2.0.2",
     "igniteui-dockmanager": "1.16.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-dashboards": "5.2.0",
-    "igniteui-webcomponents-datasources": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
-    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.1-beta.0",
     "lit": "^3.2.0",
     "lit-html": "^3.2.0"
   },
diff --git a/samples/charts/category-chart/annotations-all/package.json b/samples/charts/category-chart/annotations-all/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/annotations-all/package.json
+++ b/samples/charts/category-chart/annotations-all/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations-all/webpack.config.js b/samples/charts/category-chart/annotations-all/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/annotations-all/webpack.config.js
+++ b/samples/charts/category-chart/annotations-all/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/annotations-callouts/package.json b/samples/charts/category-chart/annotations-callouts/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/annotations-callouts/package.json
+++ b/samples/charts/category-chart/annotations-callouts/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations-callouts/webpack.config.js b/samples/charts/category-chart/annotations-callouts/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/annotations-callouts/webpack.config.js
+++ b/samples/charts/category-chart/annotations-callouts/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/annotations-crosshairs/package.json b/samples/charts/category-chart/annotations-crosshairs/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/annotations-crosshairs/package.json
+++ b/samples/charts/category-chart/annotations-crosshairs/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations-crosshairs/webpack.config.js b/samples/charts/category-chart/annotations-crosshairs/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/annotations-crosshairs/webpack.config.js
+++ b/samples/charts/category-chart/annotations-crosshairs/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/annotations-custom/package.json b/samples/charts/category-chart/annotations-custom/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/annotations-custom/package.json
+++ b/samples/charts/category-chart/annotations-custom/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations-custom/webpack.config.js b/samples/charts/category-chart/annotations-custom/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/annotations-custom/webpack.config.js
+++ b/samples/charts/category-chart/annotations-custom/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/annotations-final-value/package.json b/samples/charts/category-chart/annotations-final-value/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/annotations-final-value/package.json
+++ b/samples/charts/category-chart/annotations-final-value/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations-final-value/webpack.config.js b/samples/charts/category-chart/annotations-final-value/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/annotations-final-value/webpack.config.js
+++ b/samples/charts/category-chart/annotations-final-value/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/annotations-highlighting/package.json b/samples/charts/category-chart/annotations-highlighting/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/annotations-highlighting/package.json
+++ b/samples/charts/category-chart/annotations-highlighting/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations-highlighting/webpack.config.js b/samples/charts/category-chart/annotations-highlighting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/annotations-highlighting/webpack.config.js
+++ b/samples/charts/category-chart/annotations-highlighting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/annotations/package.json b/samples/charts/category-chart/annotations/package.json
index 638e4f5584..ffbc22ae06 100644
--- a/samples/charts/category-chart/annotations/package.json
+++ b/samples/charts/category-chart/annotations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/annotations/webpack.config.js b/samples/charts/category-chart/annotations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/annotations/webpack.config.js
+++ b/samples/charts/category-chart/annotations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/package.json b/samples/charts/category-chart/area-chart-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/area-chart-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/area-chart-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/area-chart-single-source/package.json b/samples/charts/category-chart/area-chart-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/area-chart-single-source/package.json
+++ b/samples/charts/category-chart/area-chart-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/area-chart-single-source/webpack.config.js b/samples/charts/category-chart/area-chart-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/area-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/area-chart-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/area-chart-styling/package.json b/samples/charts/category-chart/area-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/area-chart-styling/package.json
+++ b/samples/charts/category-chart/area-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/area-chart-styling/webpack.config.js b/samples/charts/category-chart/area-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/area-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/area-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-gap/package.json b/samples/charts/category-chart/axis-gap/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-gap/package.json
+++ b/samples/charts/category-chart/axis-gap/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-gap/webpack.config.js b/samples/charts/category-chart/axis-gap/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-gap/webpack.config.js
+++ b/samples/charts/category-chart/axis-gap/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-gridlines/package.json b/samples/charts/category-chart/axis-gridlines/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-gridlines/package.json
+++ b/samples/charts/category-chart/axis-gridlines/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-gridlines/webpack.config.js b/samples/charts/category-chart/axis-gridlines/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-gridlines/webpack.config.js
+++ b/samples/charts/category-chart/axis-gridlines/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-inverted/package.json b/samples/charts/category-chart/axis-inverted/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-inverted/package.json
+++ b/samples/charts/category-chart/axis-inverted/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-inverted/webpack.config.js b/samples/charts/category-chart/axis-inverted/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-inverted/webpack.config.js
+++ b/samples/charts/category-chart/axis-inverted/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-labels/package.json b/samples/charts/category-chart/axis-labels/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-labels/package.json
+++ b/samples/charts/category-chart/axis-labels/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-labels/webpack.config.js b/samples/charts/category-chart/axis-labels/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-labels/webpack.config.js
+++ b/samples/charts/category-chart/axis-labels/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-locations/package.json b/samples/charts/category-chart/axis-locations/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-locations/package.json
+++ b/samples/charts/category-chart/axis-locations/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-locations/webpack.config.js b/samples/charts/category-chart/axis-locations/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-locations/webpack.config.js
+++ b/samples/charts/category-chart/axis-locations/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-options/package.json b/samples/charts/category-chart/axis-options/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/axis-options/package.json
+++ b/samples/charts/category-chart/axis-options/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-options/webpack.config.js b/samples/charts/category-chart/axis-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-options/webpack.config.js
+++ b/samples/charts/category-chart/axis-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-overlap/package.json b/samples/charts/category-chart/axis-overlap/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-overlap/package.json
+++ b/samples/charts/category-chart/axis-overlap/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-overlap/webpack.config.js b/samples/charts/category-chart/axis-overlap/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-overlap/webpack.config.js
+++ b/samples/charts/category-chart/axis-overlap/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-range/package.json b/samples/charts/category-chart/axis-range/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-range/package.json
+++ b/samples/charts/category-chart/axis-range/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-range/webpack.config.js b/samples/charts/category-chart/axis-range/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-range/webpack.config.js
+++ b/samples/charts/category-chart/axis-range/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-tickmarks/package.json b/samples/charts/category-chart/axis-tickmarks/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/axis-tickmarks/package.json
+++ b/samples/charts/category-chart/axis-tickmarks/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-tickmarks/webpack.config.js b/samples/charts/category-chart/axis-tickmarks/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-tickmarks/webpack.config.js
+++ b/samples/charts/category-chart/axis-tickmarks/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/axis-titles/package.json b/samples/charts/category-chart/axis-titles/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/axis-titles/package.json
+++ b/samples/charts/category-chart/axis-titles/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/axis-titles/webpack.config.js b/samples/charts/category-chart/axis-titles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/axis-titles/webpack.config.js
+++ b/samples/charts/category-chart/axis-titles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/chart-highlight-filter/package.json b/samples/charts/category-chart/chart-highlight-filter/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/chart-highlight-filter/package.json
+++ b/samples/charts/category-chart/chart-highlight-filter/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/chart-highlight-filter/webpack.config.js b/samples/charts/category-chart/chart-highlight-filter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/chart-highlight-filter/webpack.config.js
+++ b/samples/charts/category-chart/chart-highlight-filter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/package.json b/samples/charts/category-chart/column-chart-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/column-chart-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/column-chart-single-source/package.json b/samples/charts/category-chart/column-chart-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/column-chart-single-source/package.json
+++ b/samples/charts/category-chart/column-chart-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/column-chart-single-source/webpack.config.js b/samples/charts/category-chart/column-chart-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/column-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/column-chart-styling/package.json b/samples/charts/category-chart/column-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/column-chart-styling/package.json
+++ b/samples/charts/category-chart/column-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/column-chart-styling/webpack.config.js b/samples/charts/category-chart/column-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/column-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/column-chart-with-highlighting/package.json b/samples/charts/category-chart/column-chart-with-highlighting/package.json
index e8a763674e..ea97b08742 100644
--- a/samples/charts/category-chart/column-chart-with-highlighting/package.json
+++ b/samples/charts/category-chart/column-chart-with-highlighting/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/column-chart-with-highlighting/webpack.config.js b/samples/charts/category-chart/column-chart-with-highlighting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/column-chart-with-highlighting/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-with-highlighting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/package.json b/samples/charts/category-chart/column-chart-with-tooltips/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/package.json
+++ b/samples/charts/category-chart/column-chart-with-tooltips/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js b/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js
+++ b/samples/charts/category-chart/column-chart-with-tooltips/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/custom-selection/package.json b/samples/charts/category-chart/custom-selection/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/custom-selection/package.json
+++ b/samples/charts/category-chart/custom-selection/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/custom-selection/webpack.config.js b/samples/charts/category-chart/custom-selection/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/custom-selection/webpack.config.js
+++ b/samples/charts/category-chart/custom-selection/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-aggregations/package.json b/samples/charts/category-chart/data-aggregations/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/data-aggregations/package.json
+++ b/samples/charts/category-chart/data-aggregations/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-aggregations/webpack.config.js b/samples/charts/category-chart/data-aggregations/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-aggregations/webpack.config.js
+++ b/samples/charts/category-chart/data-aggregations/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-filter/package.json b/samples/charts/category-chart/data-filter/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/data-filter/package.json
+++ b/samples/charts/category-chart/data-filter/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-filter/webpack.config.js b/samples/charts/category-chart/data-filter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-filter/webpack.config.js
+++ b/samples/charts/category-chart/data-filter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/package.json b/samples/charts/category-chart/data-legend-formatting-decimals/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/package.json
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js b/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-legend/package.json b/samples/charts/category-chart/data-legend/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/data-legend/package.json
+++ b/samples/charts/category-chart/data-legend/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-legend/webpack.config.js b/samples/charts/category-chart/data-legend/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-legend/webpack.config.js
+++ b/samples/charts/category-chart/data-legend/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json b/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js b/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-tooltip-positioning/package.json b/samples/charts/category-chart/data-tooltip-positioning/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/package.json
+++ b/samples/charts/category-chart/data-tooltip-positioning/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js b/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js
+++ b/samples/charts/category-chart/data-tooltip-positioning/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/data-tooltip/package.json b/samples/charts/category-chart/data-tooltip/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/data-tooltip/package.json
+++ b/samples/charts/category-chart/data-tooltip/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/data-tooltip/webpack.config.js b/samples/charts/category-chart/data-tooltip/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/data-tooltip/webpack.config.js
+++ b/samples/charts/category-chart/data-tooltip/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/format-specifiers/package.json b/samples/charts/category-chart/format-specifiers/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/category-chart/format-specifiers/package.json
+++ b/samples/charts/category-chart/format-specifiers/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/format-specifiers/webpack.config.js b/samples/charts/category-chart/format-specifiers/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/format-specifiers/webpack.config.js
+++ b/samples/charts/category-chart/format-specifiers/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/high-frequency/package.json b/samples/charts/category-chart/high-frequency/package.json
index dfa480c6e0..30bb6f8727 100644
--- a/samples/charts/category-chart/high-frequency/package.json
+++ b/samples/charts/category-chart/high-frequency/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/high-frequency/webpack.config.js b/samples/charts/category-chart/high-frequency/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/high-frequency/webpack.config.js
+++ b/samples/charts/category-chart/high-frequency/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/high-volume/package.json b/samples/charts/category-chart/high-volume/package.json
index eb1f472a51..fa2f5c7e61 100644
--- a/samples/charts/category-chart/high-volume/package.json
+++ b/samples/charts/category-chart/high-volume/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/high-volume/webpack.config.js b/samples/charts/category-chart/high-volume/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/high-volume/webpack.config.js
+++ b/samples/charts/category-chart/high-volume/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/highlighting-behavior/package.json b/samples/charts/category-chart/highlighting-behavior/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/highlighting-behavior/package.json
+++ b/samples/charts/category-chart/highlighting-behavior/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/highlighting-behavior/webpack.config.js b/samples/charts/category-chart/highlighting-behavior/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/highlighting-behavior/webpack.config.js
+++ b/samples/charts/category-chart/highlighting-behavior/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/highlighting-mode/package.json b/samples/charts/category-chart/highlighting-mode/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/highlighting-mode/package.json
+++ b/samples/charts/category-chart/highlighting-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/highlighting-mode/webpack.config.js b/samples/charts/category-chart/highlighting-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/highlighting-mode/webpack.config.js
+++ b/samples/charts/category-chart/highlighting-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/highlighting/package.json b/samples/charts/category-chart/highlighting/package.json
index e8a763674e..ea97b08742 100644
--- a/samples/charts/category-chart/highlighting/package.json
+++ b/samples/charts/category-chart/highlighting/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/highlighting/webpack.config.js b/samples/charts/category-chart/highlighting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/highlighting/webpack.config.js
+++ b/samples/charts/category-chart/highlighting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/legend-highlighting/package.json b/samples/charts/category-chart/legend-highlighting/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/legend-highlighting/package.json
+++ b/samples/charts/category-chart/legend-highlighting/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/legend-highlighting/webpack.config.js b/samples/charts/category-chart/legend-highlighting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/legend-highlighting/webpack.config.js
+++ b/samples/charts/category-chart/legend-highlighting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/package.json b/samples/charts/category-chart/line-chart-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/line-chart-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/line-chart-single-source/package.json b/samples/charts/category-chart/line-chart-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/line-chart-single-source/package.json
+++ b/samples/charts/category-chart/line-chart-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/line-chart-single-source/webpack.config.js b/samples/charts/category-chart/line-chart-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/line-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/line-chart-styling/package.json b/samples/charts/category-chart/line-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/line-chart-styling/package.json
+++ b/samples/charts/category-chart/line-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/line-chart-styling/webpack.config.js b/samples/charts/category-chart/line-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/line-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/line-chart-with-animations/package.json b/samples/charts/category-chart/line-chart-with-animations/package.json
index 6a9a12774f..42d0bff0cf 100644
--- a/samples/charts/category-chart/line-chart-with-animations/package.json
+++ b/samples/charts/category-chart/line-chart-with-animations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/line-chart-with-animations/webpack.config.js b/samples/charts/category-chart/line-chart-with-animations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/line-chart-with-animations/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-with-animations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/line-chart-with-annotations/package.json b/samples/charts/category-chart/line-chart-with-annotations/package.json
index 638e4f5584..ffbc22ae06 100644
--- a/samples/charts/category-chart/line-chart-with-annotations/package.json
+++ b/samples/charts/category-chart/line-chart-with-annotations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/line-chart-with-annotations/webpack.config.js b/samples/charts/category-chart/line-chart-with-annotations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/line-chart-with-annotations/webpack.config.js
+++ b/samples/charts/category-chart/line-chart-with-annotations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/marker-options/package.json b/samples/charts/category-chart/marker-options/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/marker-options/package.json
+++ b/samples/charts/category-chart/marker-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/marker-options/webpack.config.js b/samples/charts/category-chart/marker-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/marker-options/webpack.config.js
+++ b/samples/charts/category-chart/marker-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/marker-templates/package.json b/samples/charts/category-chart/marker-templates/package.json
index 2f83e8863c..efc855b07b 100644
--- a/samples/charts/category-chart/marker-templates/package.json
+++ b/samples/charts/category-chart/marker-templates/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/marker-templates/webpack.config.js b/samples/charts/category-chart/marker-templates/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/marker-templates/webpack.config.js
+++ b/samples/charts/category-chart/marker-templates/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/overview/package.json b/samples/charts/category-chart/overview/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/overview/package.json
+++ b/samples/charts/category-chart/overview/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/overview/webpack.config.js b/samples/charts/category-chart/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/overview/webpack.config.js
+++ b/samples/charts/category-chart/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/package.json b/samples/charts/category-chart/point-chart-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/package.json
+++ b/samples/charts/category-chart/point-chart-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js b/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/point-chart-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/point-chart-single-source/package.json b/samples/charts/category-chart/point-chart-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/point-chart-single-source/package.json
+++ b/samples/charts/category-chart/point-chart-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/point-chart-single-source/webpack.config.js b/samples/charts/category-chart/point-chart-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/point-chart-single-source/webpack.config.js
+++ b/samples/charts/category-chart/point-chart-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/point-chart-styling/package.json b/samples/charts/category-chart/point-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/point-chart-styling/package.json
+++ b/samples/charts/category-chart/point-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/point-chart-styling/webpack.config.js b/samples/charts/category-chart/point-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/point-chart-styling/webpack.config.js
+++ b/samples/charts/category-chart/point-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/selection-modes/package.json b/samples/charts/category-chart/selection-modes/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/selection-modes/package.json
+++ b/samples/charts/category-chart/selection-modes/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/selection-modes/webpack.config.js b/samples/charts/category-chart/selection-modes/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/selection-modes/webpack.config.js
+++ b/samples/charts/category-chart/selection-modes/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/selection-multiple-modes/package.json b/samples/charts/category-chart/selection-multiple-modes/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/selection-multiple-modes/package.json
+++ b/samples/charts/category-chart/selection-multiple-modes/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/selection-multiple-modes/webpack.config.js b/samples/charts/category-chart/selection-multiple-modes/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/selection-multiple-modes/webpack.config.js
+++ b/samples/charts/category-chart/selection-multiple-modes/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/package.json b/samples/charts/category-chart/spline-area-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/package.json
+++ b/samples/charts/category-chart/spline-area-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js b/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/spline-area-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/spline-area-single-source/package.json b/samples/charts/category-chart/spline-area-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/spline-area-single-source/package.json
+++ b/samples/charts/category-chart/spline-area-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/spline-area-single-source/webpack.config.js b/samples/charts/category-chart/spline-area-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/spline-area-single-source/webpack.config.js
+++ b/samples/charts/category-chart/spline-area-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/spline-area-styling/package.json b/samples/charts/category-chart/spline-area-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/spline-area-styling/package.json
+++ b/samples/charts/category-chart/spline-area-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/spline-area-styling/webpack.config.js b/samples/charts/category-chart/spline-area-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/spline-area-styling/webpack.config.js
+++ b/samples/charts/category-chart/spline-area-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/spline-multiple-sources/package.json b/samples/charts/category-chart/spline-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/spline-multiple-sources/package.json
+++ b/samples/charts/category-chart/spline-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/spline-multiple-sources/webpack.config.js b/samples/charts/category-chart/spline-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/spline-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/spline-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/spline-single-source/package.json b/samples/charts/category-chart/spline-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/spline-single-source/package.json
+++ b/samples/charts/category-chart/spline-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/spline-single-source/webpack.config.js b/samples/charts/category-chart/spline-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/spline-single-source/webpack.config.js
+++ b/samples/charts/category-chart/spline-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/spline-styling/package.json b/samples/charts/category-chart/spline-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/spline-styling/package.json
+++ b/samples/charts/category-chart/spline-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/spline-styling/webpack.config.js b/samples/charts/category-chart/spline-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/spline-styling/webpack.config.js
+++ b/samples/charts/category-chart/spline-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/stack-columns/package.json b/samples/charts/category-chart/stack-columns/package.json
index 3b4c647244..ee45c7298d 100644
--- a/samples/charts/category-chart/stack-columns/package.json
+++ b/samples/charts/category-chart/stack-columns/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/stack-columns/webpack.config.js b/samples/charts/category-chart/stack-columns/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/stack-columns/webpack.config.js
+++ b/samples/charts/category-chart/stack-columns/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/step-area-multiple-sources/package.json b/samples/charts/category-chart/step-area-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/package.json
+++ b/samples/charts/category-chart/step-area-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js b/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/step-area-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/step-area-single-source/package.json b/samples/charts/category-chart/step-area-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/step-area-single-source/package.json
+++ b/samples/charts/category-chart/step-area-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/step-area-single-source/webpack.config.js b/samples/charts/category-chart/step-area-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/step-area-single-source/webpack.config.js
+++ b/samples/charts/category-chart/step-area-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/step-area-styling/package.json b/samples/charts/category-chart/step-area-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/step-area-styling/package.json
+++ b/samples/charts/category-chart/step-area-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/step-area-styling/webpack.config.js b/samples/charts/category-chart/step-area-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/step-area-styling/webpack.config.js
+++ b/samples/charts/category-chart/step-area-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/step-line-multiple-sources/package.json b/samples/charts/category-chart/step-line-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/package.json
+++ b/samples/charts/category-chart/step-line-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js b/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js
+++ b/samples/charts/category-chart/step-line-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/step-line-single-source/package.json b/samples/charts/category-chart/step-line-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/step-line-single-source/package.json
+++ b/samples/charts/category-chart/step-line-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/step-line-single-source/webpack.config.js b/samples/charts/category-chart/step-line-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/step-line-single-source/webpack.config.js
+++ b/samples/charts/category-chart/step-line-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/step-line-styling/package.json b/samples/charts/category-chart/step-line-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/category-chart/step-line-styling/package.json
+++ b/samples/charts/category-chart/step-line-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/step-line-styling/webpack.config.js b/samples/charts/category-chart/step-line-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/step-line-styling/webpack.config.js
+++ b/samples/charts/category-chart/step-line-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/tooltip-template/package.json b/samples/charts/category-chart/tooltip-template/package.json
index e1840c79be..6e3dcbc3bf 100644
--- a/samples/charts/category-chart/tooltip-template/package.json
+++ b/samples/charts/category-chart/tooltip-template/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/tooltip-template/webpack.config.js b/samples/charts/category-chart/tooltip-template/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/tooltip-template/webpack.config.js
+++ b/samples/charts/category-chart/tooltip-template/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/tooltip-types/package.json b/samples/charts/category-chart/tooltip-types/package.json
index e1840c79be..6e3dcbc3bf 100644
--- a/samples/charts/category-chart/tooltip-types/package.json
+++ b/samples/charts/category-chart/tooltip-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/tooltip-types/webpack.config.js b/samples/charts/category-chart/tooltip-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/tooltip-types/webpack.config.js
+++ b/samples/charts/category-chart/tooltip-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/trendline/package.json b/samples/charts/category-chart/trendline/package.json
index a247d7590c..dc6de32ec1 100644
--- a/samples/charts/category-chart/trendline/package.json
+++ b/samples/charts/category-chart/trendline/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/trendline/webpack.config.js b/samples/charts/category-chart/trendline/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/category-chart/trendline/webpack.config.js
+++ b/samples/charts/category-chart/trendline/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/category-chart/value-lines/package.json b/samples/charts/category-chart/value-lines/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/category-chart/value-lines/package.json
+++ b/samples/charts/category-chart/value-lines/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/category-chart/value-lines/webpack.config.js b/samples/charts/category-chart/value-lines/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/category-chart/value-lines/webpack.config.js
+++ b/samples/charts/category-chart/value-lines/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/dashboard-tile/chart-dashboard/package.json b/samples/charts/dashboard-tile/chart-dashboard/package.json
index 839db43e93..b8c7ba65d8 100644
--- a/samples/charts/dashboard-tile/chart-dashboard/package.json
+++ b/samples/charts/dashboard-tile/chart-dashboard/package.json
@@ -23,21 +23,22 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-dashboards": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/dashboard-tile/chart-dashboard/webpack.config.js b/samples/charts/dashboard-tile/chart-dashboard/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/dashboard-tile/chart-dashboard/webpack.config.js
+++ b/samples/charts/dashboard-tile/chart-dashboard/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/dashboard-tile/financial-dashboard/package.json b/samples/charts/dashboard-tile/financial-dashboard/package.json
index 839db43e93..b8c7ba65d8 100644
--- a/samples/charts/dashboard-tile/financial-dashboard/package.json
+++ b/samples/charts/dashboard-tile/financial-dashboard/package.json
@@ -23,21 +23,22 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-dashboards": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/dashboard-tile/financial-dashboard/webpack.config.js b/samples/charts/dashboard-tile/financial-dashboard/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/dashboard-tile/financial-dashboard/webpack.config.js
+++ b/samples/charts/dashboard-tile/financial-dashboard/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/dashboard-tile/gauge-dashboard/package.json b/samples/charts/dashboard-tile/gauge-dashboard/package.json
index 839db43e93..b8c7ba65d8 100644
--- a/samples/charts/dashboard-tile/gauge-dashboard/package.json
+++ b/samples/charts/dashboard-tile/gauge-dashboard/package.json
@@ -23,21 +23,22 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-dashboards": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/dashboard-tile/gauge-dashboard/webpack.config.js b/samples/charts/dashboard-tile/gauge-dashboard/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/dashboard-tile/gauge-dashboard/webpack.config.js
+++ b/samples/charts/dashboard-tile/gauge-dashboard/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/dashboard-tile/map-dashboard/package.json b/samples/charts/dashboard-tile/map-dashboard/package.json
index 839db43e93..b8c7ba65d8 100644
--- a/samples/charts/dashboard-tile/map-dashboard/package.json
+++ b/samples/charts/dashboard-tile/map-dashboard/package.json
@@ -23,21 +23,22 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-dashboards": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/dashboard-tile/map-dashboard/webpack.config.js b/samples/charts/dashboard-tile/map-dashboard/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/dashboard-tile/map-dashboard/webpack.config.js
+++ b/samples/charts/dashboard-tile/map-dashboard/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/dashboard-tile/pie-dashboard/package.json b/samples/charts/dashboard-tile/pie-dashboard/package.json
index 839db43e93..b8c7ba65d8 100644
--- a/samples/charts/dashboard-tile/pie-dashboard/package.json
+++ b/samples/charts/dashboard-tile/pie-dashboard/package.json
@@ -23,21 +23,22 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-dashboards": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-dashboards": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/dashboard-tile/pie-dashboard/webpack.config.js b/samples/charts/dashboard-tile/pie-dashboard/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/dashboard-tile/pie-dashboard/webpack.config.js
+++ b/samples/charts/dashboard-tile/pie-dashboard/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/annotations-custom/package.json b/samples/charts/data-chart/annotations-custom/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/annotations-custom/package.json
+++ b/samples/charts/data-chart/annotations-custom/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/annotations-custom/webpack.config.js b/samples/charts/data-chart/annotations-custom/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/annotations-custom/webpack.config.js
+++ b/samples/charts/data-chart/annotations-custom/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/package.json b/samples/charts/data-chart/axis-annotations-corner-radius/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/package.json
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js b/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-annotations/package.json b/samples/charts/data-chart/axis-annotations/package.json
index 5d8cd63803..f951617f61 100644
--- a/samples/charts/data-chart/axis-annotations/package.json
+++ b/samples/charts/data-chart/axis-annotations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-annotations/webpack.config.js b/samples/charts/data-chart/axis-annotations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/axis-annotations/webpack.config.js
+++ b/samples/charts/data-chart/axis-annotations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-crossing/package.json b/samples/charts/data-chart/axis-crossing/package.json
index 07edc02480..0accb6a6fd 100644
--- a/samples/charts/data-chart/axis-crossing/package.json
+++ b/samples/charts/data-chart/axis-crossing/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-crossing/webpack.config.js b/samples/charts/data-chart/axis-crossing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/axis-crossing/webpack.config.js
+++ b/samples/charts/data-chart/axis-crossing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-label-rotation/package.json b/samples/charts/data-chart/axis-label-rotation/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-chart/axis-label-rotation/package.json
+++ b/samples/charts/data-chart/axis-label-rotation/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-label-rotation/webpack.config.js b/samples/charts/data-chart/axis-label-rotation/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/axis-label-rotation/webpack.config.js
+++ b/samples/charts/data-chart/axis-label-rotation/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-locations/package.json b/samples/charts/data-chart/axis-locations/package.json
index 07edc02480..0accb6a6fd 100644
--- a/samples/charts/data-chart/axis-locations/package.json
+++ b/samples/charts/data-chart/axis-locations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-locations/webpack.config.js b/samples/charts/data-chart/axis-locations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/axis-locations/webpack.config.js
+++ b/samples/charts/data-chart/axis-locations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-min-max-gap/package.json b/samples/charts/data-chart/axis-min-max-gap/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/axis-min-max-gap/package.json
+++ b/samples/charts/data-chart/axis-min-max-gap/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-min-max-gap/webpack.config.js b/samples/charts/data-chart/axis-min-max-gap/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/axis-min-max-gap/webpack.config.js
+++ b/samples/charts/data-chart/axis-min-max-gap/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-settings/package.json b/samples/charts/data-chart/axis-settings/package.json
index 96dbb75239..5b16b74b47 100644
--- a/samples/charts/data-chart/axis-settings/package.json
+++ b/samples/charts/data-chart/axis-settings/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-settings/webpack.config.js b/samples/charts/data-chart/axis-settings/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/axis-settings/webpack.config.js
+++ b/samples/charts/data-chart/axis-settings/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-sharing/package.json b/samples/charts/data-chart/axis-sharing/package.json
index e0a70376e8..a00331692c 100644
--- a/samples/charts/data-chart/axis-sharing/package.json
+++ b/samples/charts/data-chart/axis-sharing/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-sharing/webpack.config.js b/samples/charts/data-chart/axis-sharing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/axis-sharing/webpack.config.js
+++ b/samples/charts/data-chart/axis-sharing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/axis-types/package.json b/samples/charts/data-chart/axis-types/package.json
index 5d69cca8ff..793c9665fc 100644
--- a/samples/charts/data-chart/axis-types/package.json
+++ b/samples/charts/data-chart/axis-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/axis-types/webpack.config.js b/samples/charts/data-chart/axis-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/axis-types/webpack.config.js
+++ b/samples/charts/data-chart/axis-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/package.json b/samples/charts/data-chart/bar-chart-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/package.json
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js b/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/bar-chart-overlapping/package.json b/samples/charts/data-chart/bar-chart-overlapping/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/package.json
+++ b/samples/charts/data-chart/bar-chart-overlapping/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js b/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-overlapping/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/bar-chart-single-source/package.json b/samples/charts/data-chart/bar-chart-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/bar-chart-single-source/package.json
+++ b/samples/charts/data-chart/bar-chart-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/bar-chart-single-source/webpack.config.js b/samples/charts/data-chart/bar-chart-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/bar-chart-single-source/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/bar-chart-styling/package.json b/samples/charts/data-chart/bar-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/bar-chart-styling/package.json
+++ b/samples/charts/data-chart/bar-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/bar-chart-styling/webpack.config.js b/samples/charts/data-chart/bar-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/bar-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/bar-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/callout-layer-styling/package.json b/samples/charts/data-chart/callout-layer-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/callout-layer-styling/package.json
+++ b/samples/charts/data-chart/callout-layer-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/callout-layer-styling/webpack.config.js b/samples/charts/data-chart/callout-layer-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/callout-layer-styling/webpack.config.js
+++ b/samples/charts/data-chart/callout-layer-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js b/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js b/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-highlight-filter/package.json b/samples/charts/data-chart/chart-highlight-filter/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-chart/chart-highlight-filter/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-highlight-filter/webpack.config.js b/samples/charts/data-chart/chart-highlight-filter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/chart-highlight-filter/webpack.config.js
+++ b/samples/charts/data-chart/chart-highlight-filter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-navigation/package.json b/samples/charts/data-chart/chart-navigation/package.json
index ba330db753..942a2ad449 100644
--- a/samples/charts/data-chart/chart-navigation/package.json
+++ b/samples/charts/data-chart/chart-navigation/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-navigation/webpack.config.js b/samples/charts/data-chart/chart-navigation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/chart-navigation/webpack.config.js
+++ b/samples/charts/data-chart/chart-navigation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-overview/package.json b/samples/charts/data-chart/chart-overview/package.json
index c0a041e484..f00720f4ab 100644
--- a/samples/charts/data-chart/chart-overview/package.json
+++ b/samples/charts/data-chart/chart-overview/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-overview/webpack.config.js b/samples/charts/data-chart/chart-overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/chart-overview/webpack.config.js
+++ b/samples/charts/data-chart/chart-overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-performance/package.json b/samples/charts/data-chart/chart-performance/package.json
index c673650f86..30fcb2a97e 100644
--- a/samples/charts/data-chart/chart-performance/package.json
+++ b/samples/charts/data-chart/chart-performance/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-performance/webpack.config.js b/samples/charts/data-chart/chart-performance/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/chart-performance/webpack.config.js
+++ b/samples/charts/data-chart/chart-performance/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-synchronization/package.json b/samples/charts/data-chart/chart-synchronization/package.json
index 393fad3844..a03c4ffce1 100644
--- a/samples/charts/data-chart/chart-synchronization/package.json
+++ b/samples/charts/data-chart/chart-synchronization/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-synchronization/webpack.config.js b/samples/charts/data-chart/chart-synchronization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/chart-synchronization/webpack.config.js
+++ b/samples/charts/data-chart/chart-synchronization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/chart-titles/package.json b/samples/charts/data-chart/chart-titles/package.json
index 7e563a6e22..6c061ac23c 100644
--- a/samples/charts/data-chart/chart-titles/package.json
+++ b/samples/charts/data-chart/chart-titles/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/chart-titles/webpack.config.js b/samples/charts/data-chart/chart-titles/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/chart-titles/webpack.config.js
+++ b/samples/charts/data-chart/chart-titles/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/composite-chart/package.json b/samples/charts/data-chart/composite-chart/package.json
index c0a041e484..f00720f4ab 100644
--- a/samples/charts/data-chart/composite-chart/package.json
+++ b/samples/charts/data-chart/composite-chart/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/composite-chart/webpack.config.js b/samples/charts/data-chart/composite-chart/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/composite-chart/webpack.config.js
+++ b/samples/charts/data-chart/composite-chart/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/crosshair-layer-styling/package.json b/samples/charts/data-chart/crosshair-layer-styling/package.json
index 087759b6ce..6a205087a7 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/package.json
+++ b/samples/charts/data-chart/crosshair-layer-styling/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/crosshair-layer-styling/webpack.config.js b/samples/charts/data-chart/crosshair-layer-styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/webpack.config.js
+++ b/samples/charts/data-chart/crosshair-layer-styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/custom-drawing-annotations/package.json b/samples/charts/data-chart/custom-drawing-annotations/package.json
index 1ad9d6d0d2..795c51acde 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/package.json
+++ b/samples/charts/data-chart/custom-drawing-annotations/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/custom-drawing-annotations/webpack.config.js b/samples/charts/data-chart/custom-drawing-annotations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/custom-drawing-annotations/webpack.config.js
+++ b/samples/charts/data-chart/custom-drawing-annotations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/custom-editing-data/package.json b/samples/charts/data-chart/custom-editing-data/package.json
index f2e3cc26e3..358bac607d 100644
--- a/samples/charts/data-chart/custom-editing-data/package.json
+++ b/samples/charts/data-chart/custom-editing-data/package.json
@@ -26,15 +26,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/custom-editing-data/webpack.config.js b/samples/charts/data-chart/custom-editing-data/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/custom-editing-data/webpack.config.js
+++ b/samples/charts/data-chart/custom-editing-data/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/dash-array-axes/package.json b/samples/charts/data-chart/dash-array-axes/package.json
index f2e3cc26e3..358bac607d 100644
--- a/samples/charts/data-chart/dash-array-axes/package.json
+++ b/samples/charts/data-chart/dash-array-axes/package.json
@@ -26,15 +26,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/dash-array-axes/webpack.config.js b/samples/charts/data-chart/dash-array-axes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/dash-array-axes/webpack.config.js
+++ b/samples/charts/data-chart/dash-array-axes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/dash-array-series/package.json b/samples/charts/data-chart/dash-array-series/package.json
index f2e3cc26e3..358bac607d 100644
--- a/samples/charts/data-chart/dash-array-series/package.json
+++ b/samples/charts/data-chart/dash-array-series/package.json
@@ -26,15 +26,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/dash-array-series/webpack.config.js b/samples/charts/data-chart/dash-array-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/dash-array-series/webpack.config.js
+++ b/samples/charts/data-chart/dash-array-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/dash-array-tickmarks/package.json b/samples/charts/data-chart/dash-array-tickmarks/package.json
index f2e3cc26e3..358bac607d 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/package.json
+++ b/samples/charts/data-chart/dash-array-tickmarks/package.json
@@ -26,15 +26,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/dash-array-tickmarks/webpack.config.js b/samples/charts/data-chart/dash-array-tickmarks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/webpack.config.js
+++ b/samples/charts/data-chart/dash-array-tickmarks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/dash-array-trendline/package.json b/samples/charts/data-chart/dash-array-trendline/package.json
index f2e3cc26e3..358bac607d 100644
--- a/samples/charts/data-chart/dash-array-trendline/package.json
+++ b/samples/charts/data-chart/dash-array-trendline/package.json
@@ -26,15 +26,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/dash-array-trendline/webpack.config.js b/samples/charts/data-chart/dash-array-trendline/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/dash-array-trendline/webpack.config.js
+++ b/samples/charts/data-chart/dash-array-trendline/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js b/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-legend-grouping/package.json b/samples/charts/data-chart/data-legend-grouping/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/data-legend-grouping/package.json
+++ b/samples/charts/data-chart/data-legend-grouping/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-legend-grouping/webpack.config.js b/samples/charts/data-chart/data-legend-grouping/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-legend-grouping/webpack.config.js
+++ b/samples/charts/data-chart/data-legend-grouping/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-legend-styling/package.json b/samples/charts/data-chart/data-legend-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/data-legend-styling/package.json
+++ b/samples/charts/data-chart/data-legend-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-legend-styling/webpack.config.js b/samples/charts/data-chart/data-legend-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-legend-styling/webpack.config.js
+++ b/samples/charts/data-chart/data-legend-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-legend/package.json b/samples/charts/data-chart/data-legend/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/data-legend/package.json
+++ b/samples/charts/data-chart/data-legend/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-legend/webpack.config.js b/samples/charts/data-chart/data-legend/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-legend/webpack.config.js
+++ b/samples/charts/data-chart/data-legend/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-tooltip-grouping/package.json b/samples/charts/data-chart/data-tooltip-grouping/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/package.json
+++ b/samples/charts/data-chart/data-tooltip-grouping/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js b/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip-grouping/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-tooltip-styling/package.json b/samples/charts/data-chart/data-tooltip-styling/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/data-chart/data-tooltip-styling/package.json
+++ b/samples/charts/data-chart/data-tooltip-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-tooltip-styling/webpack.config.js b/samples/charts/data-chart/data-tooltip-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-tooltip-styling/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/data-tooltip/package.json b/samples/charts/data-chart/data-tooltip/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/data-tooltip/package.json
+++ b/samples/charts/data-chart/data-tooltip/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/data-tooltip/webpack.config.js b/samples/charts/data-chart/data-tooltip/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/data-tooltip/webpack.config.js
+++ b/samples/charts/data-chart/data-tooltip/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/final-value-layer-styling/package.json b/samples/charts/data-chart/final-value-layer-styling/package.json
index 124af4b0e0..567c2bd7de 100644
--- a/samples/charts/data-chart/final-value-layer-styling/package.json
+++ b/samples/charts/data-chart/final-value-layer-styling/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/final-value-layer-styling/webpack.config.js b/samples/charts/data-chart/final-value-layer-styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/final-value-layer-styling/webpack.config.js
+++ b/samples/charts/data-chart/final-value-layer-styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/financial-price-series/package.json b/samples/charts/data-chart/financial-price-series/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/financial-price-series/package.json
+++ b/samples/charts/data-chart/financial-price-series/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/financial-price-series/webpack.config.js b/samples/charts/data-chart/financial-price-series/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/financial-price-series/webpack.config.js
+++ b/samples/charts/data-chart/financial-price-series/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/format-specifiers/package.json b/samples/charts/data-chart/format-specifiers/package.json
index f2e3cc26e3..358bac607d 100644
--- a/samples/charts/data-chart/format-specifiers/package.json
+++ b/samples/charts/data-chart/format-specifiers/package.json
@@ -26,15 +26,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/format-specifiers/webpack.config.js b/samples/charts/data-chart/format-specifiers/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/format-specifiers/webpack.config.js
+++ b/samples/charts/data-chart/format-specifiers/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/legends/package.json b/samples/charts/data-chart/legends/package.json
index 6f9fd8c78d..b6241db9dc 100644
--- a/samples/charts/data-chart/legends/package.json
+++ b/samples/charts/data-chart/legends/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/legends/webpack.config.js b/samples/charts/data-chart/legends/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/legends/webpack.config.js
+++ b/samples/charts/data-chart/legends/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-area-chart-styling/package.json b/samples/charts/data-chart/polar-area-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/package.json
+++ b/samples/charts/data-chart/polar-area-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js b/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/polar-area-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-area-chart/package.json b/samples/charts/data-chart/polar-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/polar-area-chart/package.json
+++ b/samples/charts/data-chart/polar-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-area-chart/webpack.config.js b/samples/charts/data-chart/polar-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/polar-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-chart-types/package.json b/samples/charts/data-chart/polar-chart-types/package.json
index 3f4fb12e3c..f00072c88c 100644
--- a/samples/charts/data-chart/polar-chart-types/package.json
+++ b/samples/charts/data-chart/polar-chart-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-chart-types/webpack.config.js b/samples/charts/data-chart/polar-chart-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/polar-chart-types/webpack.config.js
+++ b/samples/charts/data-chart/polar-chart-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-line-chart/package.json b/samples/charts/data-chart/polar-line-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/polar-line-chart/package.json
+++ b/samples/charts/data-chart/polar-line-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-line-chart/webpack.config.js b/samples/charts/data-chart/polar-line-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/polar-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-line-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-scatter-chart/package.json b/samples/charts/data-chart/polar-scatter-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/polar-scatter-chart/package.json
+++ b/samples/charts/data-chart/polar-scatter-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-scatter-chart/webpack.config.js b/samples/charts/data-chart/polar-scatter-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/polar-scatter-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-scatter-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-spline-area-chart/package.json b/samples/charts/data-chart/polar-spline-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/package.json
+++ b/samples/charts/data-chart/polar-spline-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js b/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-spline-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/polar-spline-chart/package.json b/samples/charts/data-chart/polar-spline-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/polar-spline-chart/package.json
+++ b/samples/charts/data-chart/polar-spline-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/polar-spline-chart/webpack.config.js b/samples/charts/data-chart/polar-spline-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/polar-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/polar-spline-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-area-chart-styling/package.json b/samples/charts/data-chart/radial-area-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/package.json
+++ b/samples/charts/data-chart/radial-area-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js b/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/radial-area-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-area-chart/package.json b/samples/charts/data-chart/radial-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-area-chart/package.json
+++ b/samples/charts/data-chart/radial-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-area-chart/webpack.config.js b/samples/charts/data-chart/radial-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-chart-types/package.json b/samples/charts/data-chart/radial-chart-types/package.json
index ed8d1a579c..848066c15c 100644
--- a/samples/charts/data-chart/radial-chart-types/package.json
+++ b/samples/charts/data-chart/radial-chart-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-chart-types/webpack.config.js b/samples/charts/data-chart/radial-chart-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/radial-chart-types/webpack.config.js
+++ b/samples/charts/data-chart/radial-chart-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-column-chart-selection/package.json b/samples/charts/data-chart/radial-column-chart-selection/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/package.json
+++ b/samples/charts/data-chart/radial-column-chart-selection/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js b/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js
+++ b/samples/charts/data-chart/radial-column-chart-selection/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-column-chart/package.json b/samples/charts/data-chart/radial-column-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-column-chart/package.json
+++ b/samples/charts/data-chart/radial-column-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-column-chart/webpack.config.js b/samples/charts/data-chart/radial-column-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-column-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-label-mode/package.json b/samples/charts/data-chart/radial-label-mode/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-chart/radial-label-mode/package.json
+++ b/samples/charts/data-chart/radial-label-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-label-mode/webpack.config.js b/samples/charts/data-chart/radial-label-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-label-mode/webpack.config.js
+++ b/samples/charts/data-chart/radial-label-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-line-chart/package.json b/samples/charts/data-chart/radial-line-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-line-chart/package.json
+++ b/samples/charts/data-chart/radial-line-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-line-chart/webpack.config.js b/samples/charts/data-chart/radial-line-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-line-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-pie-chart/package.json b/samples/charts/data-chart/radial-pie-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-pie-chart/package.json
+++ b/samples/charts/data-chart/radial-pie-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-pie-chart/webpack.config.js b/samples/charts/data-chart/radial-pie-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-pie-chart/webpack.config.js
+++ b/samples/charts/data-chart/radial-pie-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json b/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js b/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/range-area-chart/package.json b/samples/charts/data-chart/range-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/range-area-chart/package.json
+++ b/samples/charts/data-chart/range-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/range-area-chart/webpack.config.js b/samples/charts/data-chart/range-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/range-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/range-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/range-column-chart/package.json b/samples/charts/data-chart/range-column-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/range-column-chart/package.json
+++ b/samples/charts/data-chart/range-column-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/range-column-chart/webpack.config.js b/samples/charts/data-chart/range-column-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/range-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/range-column-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json b/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/package.json b/samples/charts/data-chart/scatter-bubble-chart-styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js b/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-line-chart/package.json b/samples/charts/data-chart/scatter-line-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-line-chart/package.json
+++ b/samples/charts/data-chart/scatter-line-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-line-chart/webpack.config.js b/samples/charts/data-chart/scatter-line-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/scatter-line-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-point-chart/package.json b/samples/charts/data-chart/scatter-point-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-point-chart/package.json
+++ b/samples/charts/data-chart/scatter-point-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-point-chart/webpack.config.js b/samples/charts/data-chart/scatter-point-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-point-chart/webpack.config.js
+++ b/samples/charts/data-chart/scatter-point-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/scatter-spline-chart/package.json b/samples/charts/data-chart/scatter-spline-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/scatter-spline-chart/package.json
+++ b/samples/charts/data-chart/scatter-spline-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/scatter-spline-chart/webpack.config.js b/samples/charts/data-chart/scatter-spline-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/scatter-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/scatter-spline-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/selection-matcher/package.json b/samples/charts/data-chart/selection-matcher/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/selection-matcher/package.json
+++ b/samples/charts/data-chart/selection-matcher/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/selection-matcher/webpack.config.js b/samples/charts/data-chart/selection-matcher/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/selection-matcher/webpack.config.js
+++ b/samples/charts/data-chart/selection-matcher/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-animations/package.json b/samples/charts/data-chart/series-animations/package.json
index 02c014f24f..610313bb19 100644
--- a/samples/charts/data-chart/series-animations/package.json
+++ b/samples/charts/data-chart/series-animations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-animations/webpack.config.js b/samples/charts/data-chart/series-animations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-animations/webpack.config.js
+++ b/samples/charts/data-chart/series-animations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-annotations/package.json b/samples/charts/data-chart/series-annotations/package.json
index 058170d5ec..9a15df8ecb 100644
--- a/samples/charts/data-chart/series-annotations/package.json
+++ b/samples/charts/data-chart/series-annotations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-annotations/webpack.config.js b/samples/charts/data-chart/series-annotations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-annotations/webpack.config.js
+++ b/samples/charts/data-chart/series-annotations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-error-bars/package.json b/samples/charts/data-chart/series-error-bars/package.json
index b6698e9201..0b64a51a59 100644
--- a/samples/charts/data-chart/series-error-bars/package.json
+++ b/samples/charts/data-chart/series-error-bars/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-error-bars/webpack.config.js b/samples/charts/data-chart/series-error-bars/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-error-bars/webpack.config.js
+++ b/samples/charts/data-chart/series-error-bars/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-highlighting/package.json b/samples/charts/data-chart/series-highlighting/package.json
index 3b41d9cc5a..e1d675f2d0 100644
--- a/samples/charts/data-chart/series-highlighting/package.json
+++ b/samples/charts/data-chart/series-highlighting/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-highlighting/webpack.config.js b/samples/charts/data-chart/series-highlighting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-highlighting/webpack.config.js
+++ b/samples/charts/data-chart/series-highlighting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-marker-template/package.json b/samples/charts/data-chart/series-marker-template/package.json
index a47e837869..09d502b9c9 100644
--- a/samples/charts/data-chart/series-marker-template/package.json
+++ b/samples/charts/data-chart/series-marker-template/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-marker-template/webpack.config.js b/samples/charts/data-chart/series-marker-template/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-marker-template/webpack.config.js
+++ b/samples/charts/data-chart/series-marker-template/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-markers/package.json b/samples/charts/data-chart/series-markers/package.json
index 7ff62a8a82..538743ceef 100644
--- a/samples/charts/data-chart/series-markers/package.json
+++ b/samples/charts/data-chart/series-markers/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-markers/webpack.config.js b/samples/charts/data-chart/series-markers/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-markers/webpack.config.js
+++ b/samples/charts/data-chart/series-markers/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-tooltips/package.json b/samples/charts/data-chart/series-tooltips/package.json
index 64c52565e2..c0957e610c 100644
--- a/samples/charts/data-chart/series-tooltips/package.json
+++ b/samples/charts/data-chart/series-tooltips/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-tooltips/webpack.config.js b/samples/charts/data-chart/series-tooltips/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-tooltips/webpack.config.js
+++ b/samples/charts/data-chart/series-tooltips/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-trendlines/package.json b/samples/charts/data-chart/series-trendlines/package.json
index a4f025dc4d..01e147753d 100644
--- a/samples/charts/data-chart/series-trendlines/package.json
+++ b/samples/charts/data-chart/series-trendlines/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-trendlines/webpack.config.js b/samples/charts/data-chart/series-trendlines/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-trendlines/webpack.config.js
+++ b/samples/charts/data-chart/series-trendlines/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/series-value-overlay/package.json b/samples/charts/data-chart/series-value-overlay/package.json
index 9a1ad971a9..de5879cdbd 100644
--- a/samples/charts/data-chart/series-value-overlay/package.json
+++ b/samples/charts/data-chart/series-value-overlay/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/series-value-overlay/webpack.config.js b/samples/charts/data-chart/series-value-overlay/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/series-value-overlay/webpack.config.js
+++ b/samples/charts/data-chart/series-value-overlay/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-100-area-chart/package.json b/samples/charts/data-chart/stacked-100-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/package.json b/samples/charts/data-chart/stacked-100-bar-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-bar-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-bar-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-100-column-chart/package.json b/samples/charts/data-chart/stacked-100-column-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-column-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-column-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-100-line-chart/package.json b/samples/charts/data-chart/stacked-100-line-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-line-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-line-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/package.json b/samples/charts/data-chart/stacked-100-spline-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/package.json b/samples/charts/data-chart/stacked-100-spline-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/package.json
+++ b/samples/charts/data-chart/stacked-100-spline-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js b/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-100-spline-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-area-chart/package.json b/samples/charts/data-chart/stacked-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-bar-chart/package.json b/samples/charts/data-chart/stacked-bar-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-bar-chart/package.json
+++ b/samples/charts/data-chart/stacked-bar-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-bar-chart/webpack.config.js b/samples/charts/data-chart/stacked-bar-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-bar-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-bar-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-chart-types/package.json b/samples/charts/data-chart/stacked-chart-types/package.json
index 99e5d7c8a9..4f2900372a 100644
--- a/samples/charts/data-chart/stacked-chart-types/package.json
+++ b/samples/charts/data-chart/stacked-chart-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-chart-types/webpack.config.js b/samples/charts/data-chart/stacked-chart-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/stacked-chart-types/webpack.config.js
+++ b/samples/charts/data-chart/stacked-chart-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-column-chart/package.json b/samples/charts/data-chart/stacked-column-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-column-chart/package.json
+++ b/samples/charts/data-chart/stacked-column-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-column-chart/webpack.config.js b/samples/charts/data-chart/stacked-column-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-column-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-column-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-line-chart/package.json b/samples/charts/data-chart/stacked-line-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-line-chart/package.json
+++ b/samples/charts/data-chart/stacked-line-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-line-chart/webpack.config.js b/samples/charts/data-chart/stacked-line-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-line-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-line-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/package.json b/samples/charts/data-chart/stacked-spline-area-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/package.json
+++ b/samples/charts/data-chart/stacked-spline-area-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js b/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-spline-area-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/stacked-spline-chart/package.json b/samples/charts/data-chart/stacked-spline-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/stacked-spline-chart/package.json
+++ b/samples/charts/data-chart/stacked-spline-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/stacked-spline-chart/webpack.config.js b/samples/charts/data-chart/stacked-spline-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/stacked-spline-chart/webpack.config.js
+++ b/samples/charts/data-chart/stacked-spline-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/tooltip-template/package.json b/samples/charts/data-chart/tooltip-template/package.json
index 788a6cfd9f..a1236832c0 100644
--- a/samples/charts/data-chart/tooltip-template/package.json
+++ b/samples/charts/data-chart/tooltip-template/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/tooltip-template/webpack.config.js b/samples/charts/data-chart/tooltip-template/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/tooltip-template/webpack.config.js
+++ b/samples/charts/data-chart/tooltip-template/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/transition-event/package.json b/samples/charts/data-chart/transition-event/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-chart/transition-event/package.json
+++ b/samples/charts/data-chart/transition-event/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/transition-event/webpack.config.js b/samples/charts/data-chart/transition-event/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/transition-event/webpack.config.js
+++ b/samples/charts/data-chart/transition-event/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-financial-candlestick-series/package.json b/samples/charts/data-chart/type-financial-candlestick-series/package.json
index 3d8fdf473b..9046753887 100644
--- a/samples/charts/data-chart/type-financial-candlestick-series/package.json
+++ b/samples/charts/data-chart/type-financial-candlestick-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-financial-candlestick-series/webpack.config.js b/samples/charts/data-chart/type-financial-candlestick-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-financial-candlestick-series/webpack.config.js
+++ b/samples/charts/data-chart/type-financial-candlestick-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-financial-indicator-column/package.json b/samples/charts/data-chart/type-financial-indicator-column/package.json
index fb12ed95cf..a82ad0f9cf 100644
--- a/samples/charts/data-chart/type-financial-indicator-column/package.json
+++ b/samples/charts/data-chart/type-financial-indicator-column/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-financial-indicator-column/webpack.config.js b/samples/charts/data-chart/type-financial-indicator-column/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-financial-indicator-column/webpack.config.js
+++ b/samples/charts/data-chart/type-financial-indicator-column/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-financial-indicator-line/package.json b/samples/charts/data-chart/type-financial-indicator-line/package.json
index 402403bf67..20d9e3b6c6 100644
--- a/samples/charts/data-chart/type-financial-indicator-line/package.json
+++ b/samples/charts/data-chart/type-financial-indicator-line/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-financial-indicator-line/webpack.config.js b/samples/charts/data-chart/type-financial-indicator-line/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-financial-indicator-line/webpack.config.js
+++ b/samples/charts/data-chart/type-financial-indicator-line/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-financial-ohlc-series/package.json b/samples/charts/data-chart/type-financial-ohlc-series/package.json
index 072e48195c..8c237e3d6c 100644
--- a/samples/charts/data-chart/type-financial-ohlc-series/package.json
+++ b/samples/charts/data-chart/type-financial-ohlc-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-financial-ohlc-series/webpack.config.js b/samples/charts/data-chart/type-financial-ohlc-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-financial-ohlc-series/webpack.config.js
+++ b/samples/charts/data-chart/type-financial-ohlc-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-financial-overlays/package.json b/samples/charts/data-chart/type-financial-overlays/package.json
index e37b463808..a8e14f7d74 100644
--- a/samples/charts/data-chart/type-financial-overlays/package.json
+++ b/samples/charts/data-chart/type-financial-overlays/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-financial-overlays/webpack.config.js b/samples/charts/data-chart/type-financial-overlays/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-financial-overlays/webpack.config.js
+++ b/samples/charts/data-chart/type-financial-overlays/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-financial-series/package.json b/samples/charts/data-chart/type-financial-series/package.json
index 62cd84d0cd..438f7ef8f2 100644
--- a/samples/charts/data-chart/type-financial-series/package.json
+++ b/samples/charts/data-chart/type-financial-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-financial-series/webpack.config.js b/samples/charts/data-chart/type-financial-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-financial-series/webpack.config.js
+++ b/samples/charts/data-chart/type-financial-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-range-area-series/package.json b/samples/charts/data-chart/type-range-area-series/package.json
index aa6839574c..e2139bd406 100644
--- a/samples/charts/data-chart/type-range-area-series/package.json
+++ b/samples/charts/data-chart/type-range-area-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-range-area-series/webpack.config.js b/samples/charts/data-chart/type-range-area-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-range-area-series/webpack.config.js
+++ b/samples/charts/data-chart/type-range-area-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-range-column-series/package.json b/samples/charts/data-chart/type-range-column-series/package.json
index ec399964c1..ae08f2d959 100644
--- a/samples/charts/data-chart/type-range-column-series/package.json
+++ b/samples/charts/data-chart/type-range-column-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-range-column-series/webpack.config.js b/samples/charts/data-chart/type-range-column-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-range-column-series/webpack.config.js
+++ b/samples/charts/data-chart/type-range-column-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-range-series/package.json b/samples/charts/data-chart/type-range-series/package.json
index b0b32f376c..e7f99447be 100644
--- a/samples/charts/data-chart/type-range-series/package.json
+++ b/samples/charts/data-chart/type-range-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-range-series/webpack.config.js b/samples/charts/data-chart/type-range-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-range-series/webpack.config.js
+++ b/samples/charts/data-chart/type-range-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-area-series/package.json b/samples/charts/data-chart/type-scatter-area-series/package.json
index 967902cd3e..2866549e07 100644
--- a/samples/charts/data-chart/type-scatter-area-series/package.json
+++ b/samples/charts/data-chart/type-scatter-area-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-area-series/webpack.config.js b/samples/charts/data-chart/type-scatter-area-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-area-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-area-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-bubble-series/package.json b/samples/charts/data-chart/type-scatter-bubble-series/package.json
index 99f9cfc2d3..69f5a17e69 100644
--- a/samples/charts/data-chart/type-scatter-bubble-series/package.json
+++ b/samples/charts/data-chart/type-scatter-bubble-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-bubble-series/webpack.config.js b/samples/charts/data-chart/type-scatter-bubble-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-bubble-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-bubble-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-contour-series/package.json b/samples/charts/data-chart/type-scatter-contour-series/package.json
index c747b38758..9413e0e6e0 100644
--- a/samples/charts/data-chart/type-scatter-contour-series/package.json
+++ b/samples/charts/data-chart/type-scatter-contour-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-contour-series/webpack.config.js b/samples/charts/data-chart/type-scatter-contour-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-contour-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-contour-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-hd-series/package.json b/samples/charts/data-chart/type-scatter-hd-series/package.json
index 1f096bba5e..e79f8cfd0a 100644
--- a/samples/charts/data-chart/type-scatter-hd-series/package.json
+++ b/samples/charts/data-chart/type-scatter-hd-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-hd-series/webpack.config.js b/samples/charts/data-chart/type-scatter-hd-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-hd-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-hd-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-polygon-series/package.json b/samples/charts/data-chart/type-scatter-polygon-series/package.json
index 295f4db306..a2c070033c 100644
--- a/samples/charts/data-chart/type-scatter-polygon-series/package.json
+++ b/samples/charts/data-chart/type-scatter-polygon-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-polygon-series/webpack.config.js b/samples/charts/data-chart/type-scatter-polygon-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-polygon-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-polygon-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-polyline-series/package.json b/samples/charts/data-chart/type-scatter-polyline-series/package.json
index 9f2e2dd9bc..3a85c36429 100644
--- a/samples/charts/data-chart/type-scatter-polyline-series/package.json
+++ b/samples/charts/data-chart/type-scatter-polyline-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-polyline-series/webpack.config.js b/samples/charts/data-chart/type-scatter-polyline-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-polyline-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-polyline-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-scatter-series/package.json b/samples/charts/data-chart/type-scatter-series/package.json
index 29684a8976..12806ce05d 100644
--- a/samples/charts/data-chart/type-scatter-series/package.json
+++ b/samples/charts/data-chart/type-scatter-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-scatter-series/webpack.config.js b/samples/charts/data-chart/type-scatter-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-scatter-series/webpack.config.js
+++ b/samples/charts/data-chart/type-scatter-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/type-shape-series/package.json b/samples/charts/data-chart/type-shape-series/package.json
index 791fdc8cef..29a24f9647 100644
--- a/samples/charts/data-chart/type-shape-series/package.json
+++ b/samples/charts/data-chart/type-shape-series/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/type-shape-series/webpack.config.js b/samples/charts/data-chart/type-shape-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/data-chart/type-shape-series/webpack.config.js
+++ b/samples/charts/data-chart/type-shape-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-chart/waterfall-chart/package.json b/samples/charts/data-chart/waterfall-chart/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-chart/waterfall-chart/package.json
+++ b/samples/charts/data-chart/waterfall-chart/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-chart/waterfall-chart/webpack.config.js b/samples/charts/data-chart/waterfall-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-chart/waterfall-chart/webpack.config.js
+++ b/samples/charts/data-chart/waterfall-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/animation-replay/package.json b/samples/charts/data-pie-chart/animation-replay/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-pie-chart/animation-replay/package.json
+++ b/samples/charts/data-pie-chart/animation-replay/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/animation-replay/webpack.config.js b/samples/charts/data-pie-chart/animation-replay/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/animation-replay/webpack.config.js
+++ b/samples/charts/data-pie-chart/animation-replay/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/animation/package.json b/samples/charts/data-pie-chart/animation/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-pie-chart/animation/package.json
+++ b/samples/charts/data-pie-chart/animation/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/animation/webpack.config.js b/samples/charts/data-pie-chart/animation/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/animation/webpack.config.js
+++ b/samples/charts/data-pie-chart/animation/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/highlight-filter/package.json b/samples/charts/data-pie-chart/highlight-filter/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-pie-chart/highlight-filter/package.json
+++ b/samples/charts/data-pie-chart/highlight-filter/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/highlight-filter/webpack.config.js b/samples/charts/data-pie-chart/highlight-filter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/highlight-filter/webpack.config.js
+++ b/samples/charts/data-pie-chart/highlight-filter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/highlighting/package.json b/samples/charts/data-pie-chart/highlighting/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-pie-chart/highlighting/package.json
+++ b/samples/charts/data-pie-chart/highlighting/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/highlighting/webpack.config.js b/samples/charts/data-pie-chart/highlighting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/highlighting/webpack.config.js
+++ b/samples/charts/data-pie-chart/highlighting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/legend/package.json b/samples/charts/data-pie-chart/legend/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/data-pie-chart/legend/package.json
+++ b/samples/charts/data-pie-chart/legend/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/legend/webpack.config.js b/samples/charts/data-pie-chart/legend/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/legend/webpack.config.js
+++ b/samples/charts/data-pie-chart/legend/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/others/package.json b/samples/charts/data-pie-chart/others/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-pie-chart/others/package.json
+++ b/samples/charts/data-pie-chart/others/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/others/webpack.config.js b/samples/charts/data-pie-chart/others/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/others/webpack.config.js
+++ b/samples/charts/data-pie-chart/others/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/overview/package.json b/samples/charts/data-pie-chart/overview/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/data-pie-chart/overview/package.json
+++ b/samples/charts/data-pie-chart/overview/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/overview/webpack.config.js b/samples/charts/data-pie-chart/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/overview/webpack.config.js
+++ b/samples/charts/data-pie-chart/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/data-pie-chart/selection/package.json b/samples/charts/data-pie-chart/selection/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/data-pie-chart/selection/package.json
+++ b/samples/charts/data-pie-chart/selection/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/data-pie-chart/selection/webpack.config.js b/samples/charts/data-pie-chart/selection/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/data-pie-chart/selection/webpack.config.js
+++ b/samples/charts/data-pie-chart/selection/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/doughnut-chart/animation/package.json b/samples/charts/doughnut-chart/animation/package.json
index a959d0fb15..fe77a398a9 100644
--- a/samples/charts/doughnut-chart/animation/package.json
+++ b/samples/charts/doughnut-chart/animation/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/doughnut-chart/animation/webpack.config.js b/samples/charts/doughnut-chart/animation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/doughnut-chart/animation/webpack.config.js
+++ b/samples/charts/doughnut-chart/animation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/doughnut-chart/explosion/package.json b/samples/charts/doughnut-chart/explosion/package.json
index 14a5bd0143..b50ee149f9 100644
--- a/samples/charts/doughnut-chart/explosion/package.json
+++ b/samples/charts/doughnut-chart/explosion/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/doughnut-chart/explosion/webpack.config.js b/samples/charts/doughnut-chart/explosion/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/doughnut-chart/explosion/webpack.config.js
+++ b/samples/charts/doughnut-chart/explosion/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/doughnut-chart/legend/package.json b/samples/charts/doughnut-chart/legend/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/doughnut-chart/legend/package.json
+++ b/samples/charts/doughnut-chart/legend/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/doughnut-chart/legend/webpack.config.js b/samples/charts/doughnut-chart/legend/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/doughnut-chart/legend/webpack.config.js
+++ b/samples/charts/doughnut-chart/legend/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/doughnut-chart/overview/package.json b/samples/charts/doughnut-chart/overview/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/doughnut-chart/overview/package.json
+++ b/samples/charts/doughnut-chart/overview/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/doughnut-chart/overview/webpack.config.js b/samples/charts/doughnut-chart/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/doughnut-chart/overview/webpack.config.js
+++ b/samples/charts/doughnut-chart/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/doughnut-chart/rings/package.json b/samples/charts/doughnut-chart/rings/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/doughnut-chart/rings/package.json
+++ b/samples/charts/doughnut-chart/rings/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/doughnut-chart/rings/webpack.config.js b/samples/charts/doughnut-chart/rings/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/doughnut-chart/rings/webpack.config.js
+++ b/samples/charts/doughnut-chart/rings/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/doughnut-chart/selection/package.json b/samples/charts/doughnut-chart/selection/package.json
index cd9870b9f7..dc05e62d91 100644
--- a/samples/charts/doughnut-chart/selection/package.json
+++ b/samples/charts/doughnut-chart/selection/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/doughnut-chart/selection/webpack.config.js b/samples/charts/doughnut-chart/selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/doughnut-chart/selection/webpack.config.js
+++ b/samples/charts/doughnut-chart/selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/annotations/package.json b/samples/charts/financial-chart/annotations/package.json
index 3d9718954c..3569810e27 100644
--- a/samples/charts/financial-chart/annotations/package.json
+++ b/samples/charts/financial-chart/annotations/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/annotations/webpack.config.js b/samples/charts/financial-chart/annotations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/annotations/webpack.config.js
+++ b/samples/charts/financial-chart/annotations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/axis-types/package.json b/samples/charts/financial-chart/axis-types/package.json
index 4fa3ae880b..dc062b3638 100644
--- a/samples/charts/financial-chart/axis-types/package.json
+++ b/samples/charts/financial-chart/axis-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/axis-types/webpack.config.js b/samples/charts/financial-chart/axis-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/axis-types/webpack.config.js
+++ b/samples/charts/financial-chart/axis-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/package.json b/samples/charts/financial-chart/data-legend-formatting-currency/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/package.json
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js b/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/data-legend-styling-props/package.json b/samples/charts/financial-chart/data-legend-styling-props/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/package.json
+++ b/samples/charts/financial-chart/data-legend-styling-props/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js b/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js
+++ b/samples/charts/financial-chart/data-legend-styling-props/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/data-legend/package.json b/samples/charts/financial-chart/data-legend/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/data-legend/package.json
+++ b/samples/charts/financial-chart/data-legend/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/data-legend/webpack.config.js b/samples/charts/financial-chart/data-legend/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/data-legend/webpack.config.js
+++ b/samples/charts/financial-chart/data-legend/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json b/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js b/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/package.json b/samples/charts/financial-chart/data-tooltip-styling-props/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/package.json
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js b/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/data-tooltip/package.json b/samples/charts/financial-chart/data-tooltip/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/data-tooltip/package.json
+++ b/samples/charts/financial-chart/data-tooltip/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/data-tooltip/webpack.config.js b/samples/charts/financial-chart/data-tooltip/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/data-tooltip/webpack.config.js
+++ b/samples/charts/financial-chart/data-tooltip/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/format-specifiers/package.json b/samples/charts/financial-chart/format-specifiers/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/format-specifiers/package.json
+++ b/samples/charts/financial-chart/format-specifiers/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/format-specifiers/webpack.config.js b/samples/charts/financial-chart/format-specifiers/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/format-specifiers/webpack.config.js
+++ b/samples/charts/financial-chart/format-specifiers/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/high-frequency/package.json b/samples/charts/financial-chart/high-frequency/package.json
index fc2c5f0f58..69371b34f0 100644
--- a/samples/charts/financial-chart/high-frequency/package.json
+++ b/samples/charts/financial-chart/high-frequency/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/high-frequency/webpack.config.js b/samples/charts/financial-chart/high-frequency/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/high-frequency/webpack.config.js
+++ b/samples/charts/financial-chart/high-frequency/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/high-volume/package.json b/samples/charts/financial-chart/high-volume/package.json
index 7c91786b22..fc3857c041 100644
--- a/samples/charts/financial-chart/high-volume/package.json
+++ b/samples/charts/financial-chart/high-volume/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/high-volume/webpack.config.js b/samples/charts/financial-chart/high-volume/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/high-volume/webpack.config.js
+++ b/samples/charts/financial-chart/high-volume/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/indicator-customization/package.json b/samples/charts/financial-chart/indicator-customization/package.json
index b1957caced..333cbe3925 100644
--- a/samples/charts/financial-chart/indicator-customization/package.json
+++ b/samples/charts/financial-chart/indicator-customization/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/indicator-customization/webpack.config.js b/samples/charts/financial-chart/indicator-customization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/indicator-customization/webpack.config.js
+++ b/samples/charts/financial-chart/indicator-customization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/indicator-types/package.json b/samples/charts/financial-chart/indicator-types/package.json
index 296e1f4597..434b106864 100644
--- a/samples/charts/financial-chart/indicator-types/package.json
+++ b/samples/charts/financial-chart/indicator-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/indicator-types/webpack.config.js b/samples/charts/financial-chart/indicator-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/indicator-types/webpack.config.js
+++ b/samples/charts/financial-chart/indicator-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/multiple-data/package.json b/samples/charts/financial-chart/multiple-data/package.json
index f4ad257990..c5bb6299b0 100644
--- a/samples/charts/financial-chart/multiple-data/package.json
+++ b/samples/charts/financial-chart/multiple-data/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/multiple-data/webpack.config.js b/samples/charts/financial-chart/multiple-data/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/multiple-data/webpack.config.js
+++ b/samples/charts/financial-chart/multiple-data/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/overview/package.json b/samples/charts/financial-chart/overview/package.json
index fce6ec37db..22e37ff1aa 100644
--- a/samples/charts/financial-chart/overview/package.json
+++ b/samples/charts/financial-chart/overview/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/overview/webpack.config.js b/samples/charts/financial-chart/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/overview/webpack.config.js
+++ b/samples/charts/financial-chart/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/panes/package.json b/samples/charts/financial-chart/panes/package.json
index ababdf1967..5b7e6c4593 100644
--- a/samples/charts/financial-chart/panes/package.json
+++ b/samples/charts/financial-chart/panes/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/panes/webpack.config.js b/samples/charts/financial-chart/panes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/panes/webpack.config.js
+++ b/samples/charts/financial-chart/panes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/performance/package.json b/samples/charts/financial-chart/performance/package.json
index d1908da8b0..b3e2582d22 100644
--- a/samples/charts/financial-chart/performance/package.json
+++ b/samples/charts/financial-chart/performance/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/performance/webpack.config.js b/samples/charts/financial-chart/performance/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/performance/webpack.config.js
+++ b/samples/charts/financial-chart/performance/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/scrollbars/package.json b/samples/charts/financial-chart/scrollbars/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/financial-chart/scrollbars/package.json
+++ b/samples/charts/financial-chart/scrollbars/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/scrollbars/webpack.config.js b/samples/charts/financial-chart/scrollbars/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/financial-chart/scrollbars/webpack.config.js
+++ b/samples/charts/financial-chart/scrollbars/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/stock-index-chart/package.json b/samples/charts/financial-chart/stock-index-chart/package.json
index 8e579c1c0d..ffd738e20f 100644
--- a/samples/charts/financial-chart/stock-index-chart/package.json
+++ b/samples/charts/financial-chart/stock-index-chart/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/stock-index-chart/webpack.config.js b/samples/charts/financial-chart/stock-index-chart/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/stock-index-chart/webpack.config.js
+++ b/samples/charts/financial-chart/stock-index-chart/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/styling/package.json b/samples/charts/financial-chart/styling/package.json
index 90c8dc836d..06c4bf628a 100644
--- a/samples/charts/financial-chart/styling/package.json
+++ b/samples/charts/financial-chart/styling/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/styling/webpack.config.js b/samples/charts/financial-chart/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/styling/webpack.config.js
+++ b/samples/charts/financial-chart/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/titles/package.json b/samples/charts/financial-chart/titles/package.json
index 071f6f1114..6e1716db9b 100644
--- a/samples/charts/financial-chart/titles/package.json
+++ b/samples/charts/financial-chart/titles/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/titles/webpack.config.js b/samples/charts/financial-chart/titles/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/titles/webpack.config.js
+++ b/samples/charts/financial-chart/titles/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/tooltip-types/package.json b/samples/charts/financial-chart/tooltip-types/package.json
index 20dce07961..7be382a61f 100644
--- a/samples/charts/financial-chart/tooltip-types/package.json
+++ b/samples/charts/financial-chart/tooltip-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/tooltip-types/webpack.config.js b/samples/charts/financial-chart/tooltip-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/tooltip-types/webpack.config.js
+++ b/samples/charts/financial-chart/tooltip-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/trendlines/package.json b/samples/charts/financial-chart/trendlines/package.json
index 39dce02e25..04b7d9ecb1 100644
--- a/samples/charts/financial-chart/trendlines/package.json
+++ b/samples/charts/financial-chart/trendlines/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/trendlines/webpack.config.js b/samples/charts/financial-chart/trendlines/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/trendlines/webpack.config.js
+++ b/samples/charts/financial-chart/trendlines/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/financial-chart/volume-types/package.json b/samples/charts/financial-chart/volume-types/package.json
index 044f27edfd..7d2792557e 100644
--- a/samples/charts/financial-chart/volume-types/package.json
+++ b/samples/charts/financial-chart/volume-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/financial-chart/volume-types/webpack.config.js b/samples/charts/financial-chart/volume-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/financial-chart/volume-types/webpack.config.js
+++ b/samples/charts/financial-chart/volume-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/animation/package.json b/samples/charts/pie-chart/animation/package.json
index c3960dba6e..3d29c2fabe 100644
--- a/samples/charts/pie-chart/animation/package.json
+++ b/samples/charts/pie-chart/animation/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/animation/webpack.config.js b/samples/charts/pie-chart/animation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/pie-chart/animation/webpack.config.js
+++ b/samples/charts/pie-chart/animation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/explosion/package.json b/samples/charts/pie-chart/explosion/package.json
index 88122f74d9..23206a1964 100644
--- a/samples/charts/pie-chart/explosion/package.json
+++ b/samples/charts/pie-chart/explosion/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/explosion/webpack.config.js b/samples/charts/pie-chart/explosion/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/pie-chart/explosion/webpack.config.js
+++ b/samples/charts/pie-chart/explosion/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/legend/package.json b/samples/charts/pie-chart/legend/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/pie-chart/legend/package.json
+++ b/samples/charts/pie-chart/legend/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/legend/webpack.config.js b/samples/charts/pie-chart/legend/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/pie-chart/legend/webpack.config.js
+++ b/samples/charts/pie-chart/legend/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/others/package.json b/samples/charts/pie-chart/others/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/pie-chart/others/package.json
+++ b/samples/charts/pie-chart/others/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/others/webpack.config.js b/samples/charts/pie-chart/others/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/pie-chart/others/webpack.config.js
+++ b/samples/charts/pie-chart/others/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/overview/package.json b/samples/charts/pie-chart/overview/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/pie-chart/overview/package.json
+++ b/samples/charts/pie-chart/overview/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/overview/webpack.config.js b/samples/charts/pie-chart/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/pie-chart/overview/webpack.config.js
+++ b/samples/charts/pie-chart/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/selection/package.json b/samples/charts/pie-chart/selection/package.json
index 19aef334e7..436940a13a 100644
--- a/samples/charts/pie-chart/selection/package.json
+++ b/samples/charts/pie-chart/selection/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/selection/webpack.config.js b/samples/charts/pie-chart/selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/pie-chart/selection/webpack.config.js
+++ b/samples/charts/pie-chart/selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/pie-chart/styling/package.json b/samples/charts/pie-chart/styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/pie-chart/styling/package.json
+++ b/samples/charts/pie-chart/styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/pie-chart/styling/webpack.config.js b/samples/charts/pie-chart/styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/pie-chart/styling/webpack.config.js
+++ b/samples/charts/pie-chart/styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/display-area/package.json b/samples/charts/sparkline/display-area/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/sparkline/display-area/package.json
+++ b/samples/charts/sparkline/display-area/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/display-area/webpack.config.js b/samples/charts/sparkline/display-area/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/display-area/webpack.config.js
+++ b/samples/charts/sparkline/display-area/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/display-column/package.json b/samples/charts/sparkline/display-column/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/sparkline/display-column/package.json
+++ b/samples/charts/sparkline/display-column/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/display-column/webpack.config.js b/samples/charts/sparkline/display-column/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/display-column/webpack.config.js
+++ b/samples/charts/sparkline/display-column/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/display-lines/package.json b/samples/charts/sparkline/display-lines/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/sparkline/display-lines/package.json
+++ b/samples/charts/sparkline/display-lines/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/display-lines/webpack.config.js b/samples/charts/sparkline/display-lines/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/display-lines/webpack.config.js
+++ b/samples/charts/sparkline/display-lines/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/display-types/package.json b/samples/charts/sparkline/display-types/package.json
index db53992535..1dbb8c49a8 100644
--- a/samples/charts/sparkline/display-types/package.json
+++ b/samples/charts/sparkline/display-types/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/display-types/webpack.config.js b/samples/charts/sparkline/display-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/sparkline/display-types/webpack.config.js
+++ b/samples/charts/sparkline/display-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/display-winloss/package.json b/samples/charts/sparkline/display-winloss/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/sparkline/display-winloss/package.json
+++ b/samples/charts/sparkline/display-winloss/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/display-winloss/webpack.config.js b/samples/charts/sparkline/display-winloss/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/display-winloss/webpack.config.js
+++ b/samples/charts/sparkline/display-winloss/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/grid/package.json b/samples/charts/sparkline/grid/package.json
index f7a99045db..bb6f1fe375 100644
--- a/samples/charts/sparkline/grid/package.json
+++ b/samples/charts/sparkline/grid/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/grid/webpack.config.js b/samples/charts/sparkline/grid/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/sparkline/grid/webpack.config.js
+++ b/samples/charts/sparkline/grid/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/markers/package.json b/samples/charts/sparkline/markers/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/sparkline/markers/package.json
+++ b/samples/charts/sparkline/markers/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/markers/webpack.config.js b/samples/charts/sparkline/markers/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/markers/webpack.config.js
+++ b/samples/charts/sparkline/markers/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/normal-range/package.json b/samples/charts/sparkline/normal-range/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/sparkline/normal-range/package.json
+++ b/samples/charts/sparkline/normal-range/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/normal-range/webpack.config.js b/samples/charts/sparkline/normal-range/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/normal-range/webpack.config.js
+++ b/samples/charts/sparkline/normal-range/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/trendlines/package.json b/samples/charts/sparkline/trendlines/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/sparkline/trendlines/package.json
+++ b/samples/charts/sparkline/trendlines/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/trendlines/webpack.config.js b/samples/charts/sparkline/trendlines/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/trendlines/webpack.config.js
+++ b/samples/charts/sparkline/trendlines/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/sparkline/unknown-values/package.json b/samples/charts/sparkline/unknown-values/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/sparkline/unknown-values/package.json
+++ b/samples/charts/sparkline/unknown-values/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/sparkline/unknown-values/webpack.config.js b/samples/charts/sparkline/unknown-values/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/sparkline/unknown-values/webpack.config.js
+++ b/samples/charts/sparkline/unknown-values/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/package.json b/samples/charts/toolbar/actions-built-in-category-chart/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/package.json
+++ b/samples/charts/toolbar/actions-built-in-category-chart/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js b/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js
+++ b/samples/charts/toolbar/actions-built-in-category-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/package.json b/samples/charts/toolbar/actions-built-in-data-chart/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/package.json
+++ b/samples/charts/toolbar/actions-built-in-data-chart/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js b/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js
+++ b/samples/charts/toolbar/actions-built-in-data-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/color-editor-support/package.json b/samples/charts/toolbar/color-editor-support/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/toolbar/color-editor-support/package.json
+++ b/samples/charts/toolbar/color-editor-support/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/color-editor-support/webpack.config.js b/samples/charts/toolbar/color-editor-support/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/color-editor-support/webpack.config.js
+++ b/samples/charts/toolbar/color-editor-support/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/custom-tool/package.json b/samples/charts/toolbar/custom-tool/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/toolbar/custom-tool/package.json
+++ b/samples/charts/toolbar/custom-tool/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/custom-tool/webpack.config.js b/samples/charts/toolbar/custom-tool/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/custom-tool/webpack.config.js
+++ b/samples/charts/toolbar/custom-tool/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/package.json b/samples/charts/toolbar/layout-actions-for-data-chart/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/package.json
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js b/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/package.json b/samples/charts/toolbar/layout-in-vertical-orientation/package.json
index f409f6ba89..0c86b64aa1 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/package.json
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js b/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/toolbar/theming/package.json b/samples/charts/toolbar/theming/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/toolbar/theming/package.json
+++ b/samples/charts/toolbar/theming/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/toolbar/theming/webpack.config.js b/samples/charts/toolbar/theming/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/toolbar/theming/webpack.config.js
+++ b/samples/charts/toolbar/theming/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/tree-map/events/package.json b/samples/charts/tree-map/events/package.json
index 652a4c39ec..660055fcfd 100644
--- a/samples/charts/tree-map/events/package.json
+++ b/samples/charts/tree-map/events/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/tree-map/events/webpack.config.js b/samples/charts/tree-map/events/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/tree-map/events/webpack.config.js
+++ b/samples/charts/tree-map/events/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/tree-map/highlighting-percent-based/package.json b/samples/charts/tree-map/highlighting-percent-based/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/tree-map/highlighting-percent-based/package.json
+++ b/samples/charts/tree-map/highlighting-percent-based/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/tree-map/highlighting-percent-based/webpack.config.js b/samples/charts/tree-map/highlighting-percent-based/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/tree-map/highlighting-percent-based/webpack.config.js
+++ b/samples/charts/tree-map/highlighting-percent-based/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/tree-map/highlighting/package.json b/samples/charts/tree-map/highlighting/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/tree-map/highlighting/package.json
+++ b/samples/charts/tree-map/highlighting/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/tree-map/highlighting/webpack.config.js b/samples/charts/tree-map/highlighting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/tree-map/highlighting/webpack.config.js
+++ b/samples/charts/tree-map/highlighting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/tree-map/layout/package.json b/samples/charts/tree-map/layout/package.json
index 84b45d65b3..1397268d07 100644
--- a/samples/charts/tree-map/layout/package.json
+++ b/samples/charts/tree-map/layout/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/tree-map/layout/webpack.config.js b/samples/charts/tree-map/layout/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/tree-map/layout/webpack.config.js
+++ b/samples/charts/tree-map/layout/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/tree-map/overview/package.json b/samples/charts/tree-map/overview/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/tree-map/overview/package.json
+++ b/samples/charts/tree-map/overview/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/tree-map/overview/webpack.config.js b/samples/charts/tree-map/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/tree-map/overview/webpack.config.js
+++ b/samples/charts/tree-map/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/tree-map/styling/package.json b/samples/charts/tree-map/styling/package.json
index 978b6ce2d5..41360f32e8 100644
--- a/samples/charts/tree-map/styling/package.json
+++ b/samples/charts/tree-map/styling/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/tree-map/styling/webpack.config.js b/samples/charts/tree-map/styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/charts/tree-map/styling/webpack.config.js
+++ b/samples/charts/tree-map/styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/charts/zoomslider/overview/package.json b/samples/charts/zoomslider/overview/package.json
index c97e7d3eb3..5b65e4792f 100644
--- a/samples/charts/zoomslider/overview/package.json
+++ b/samples/charts/zoomslider/overview/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/charts/zoomslider/overview/webpack.config.js b/samples/charts/zoomslider/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/charts/zoomslider/overview/webpack.config.js
+++ b/samples/charts/zoomslider/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/editors/multi-column-combobox/overview/package.json b/samples/editors/multi-column-combobox/overview/package.json
index 21490592b1..55ec6b7271 100644
--- a/samples/editors/multi-column-combobox/overview/package.json
+++ b/samples/editors/multi-column-combobox/overview/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/editors/multi-column-combobox/overview/webpack.config.js b/samples/editors/multi-column-combobox/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/editors/multi-column-combobox/overview/webpack.config.js
+++ b/samples/editors/multi-column-combobox/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/editors/x-date-picker/date-limits/package.json b/samples/editors/x-date-picker/date-limits/package.json
index 0a27bae9b8..c52615caed 100644
--- a/samples/editors/x-date-picker/date-limits/package.json
+++ b/samples/editors/x-date-picker/date-limits/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/editors/x-date-picker/date-limits/webpack.config.js b/samples/editors/x-date-picker/date-limits/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/editors/x-date-picker/date-limits/webpack.config.js
+++ b/samples/editors/x-date-picker/date-limits/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/editors/x-date-picker/editing/package.json b/samples/editors/x-date-picker/editing/package.json
index bcf38fbcbc..78238bc4f3 100644
--- a/samples/editors/x-date-picker/editing/package.json
+++ b/samples/editors/x-date-picker/editing/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/editors/x-date-picker/editing/webpack.config.js b/samples/editors/x-date-picker/editing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/editors/x-date-picker/editing/webpack.config.js
+++ b/samples/editors/x-date-picker/editing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/editors/x-date-picker/format/package.json b/samples/editors/x-date-picker/format/package.json
index 9a2413512b..a1e8a37424 100644
--- a/samples/editors/x-date-picker/format/package.json
+++ b/samples/editors/x-date-picker/format/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/editors/x-date-picker/format/webpack.config.js b/samples/editors/x-date-picker/format/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/editors/x-date-picker/format/webpack.config.js
+++ b/samples/editors/x-date-picker/format/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/editors/x-date-picker/overview/package.json b/samples/editors/x-date-picker/overview/package.json
index 53e13d544f..90cb76784e 100644
--- a/samples/editors/x-date-picker/overview/package.json
+++ b/samples/editors/x-date-picker/overview/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/editors/x-date-picker/overview/webpack.config.js b/samples/editors/x-date-picker/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/editors/x-date-picker/overview/webpack.config.js
+++ b/samples/editors/x-date-picker/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/editors/x-date-picker/range/package.json b/samples/editors/x-date-picker/range/package.json
index 5a413f1ef6..f335b2bae9 100644
--- a/samples/editors/x-date-picker/range/package.json
+++ b/samples/editors/x-date-picker/range/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/editors/x-date-picker/range/webpack.config.js b/samples/editors/x-date-picker/range/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/editors/x-date-picker/range/webpack.config.js
+++ b/samples/editors/x-date-picker/range/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/excel-library/operations-on-workbooks/package.json b/samples/excel/excel-library/operations-on-workbooks/package.json
index e97667ebf1..08beba6e76 100644
--- a/samples/excel/excel-library/operations-on-workbooks/package.json
+++ b/samples/excel/excel-library/operations-on-workbooks/package.json
@@ -25,18 +25,19 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/excel-library/operations-on-workbooks/webpack.config.js b/samples/excel/excel-library/operations-on-workbooks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/excel-library/operations-on-workbooks/webpack.config.js
+++ b/samples/excel/excel-library/operations-on-workbooks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/excel-library/operations-on-worksheets/package.json b/samples/excel/excel-library/operations-on-worksheets/package.json
index 414fd39f10..1ba6dc5f4b 100644
--- a/samples/excel/excel-library/operations-on-worksheets/package.json
+++ b/samples/excel/excel-library/operations-on-worksheets/package.json
@@ -25,15 +25,16 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/excel-library/operations-on-worksheets/webpack.config.js b/samples/excel/excel-library/operations-on-worksheets/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/excel-library/operations-on-worksheets/webpack.config.js
+++ b/samples/excel/excel-library/operations-on-worksheets/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/excel-library/overview/package.json b/samples/excel/excel-library/overview/package.json
index d842709bd5..a3456ddfc9 100644
--- a/samples/excel/excel-library/overview/package.json
+++ b/samples/excel/excel-library/overview/package.json
@@ -25,15 +25,16 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/excel-library/overview/webpack.config.js b/samples/excel/excel-library/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/excel-library/overview/webpack.config.js
+++ b/samples/excel/excel-library/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/excel-library/working-with-cells/package.json b/samples/excel/excel-library/working-with-cells/package.json
index edf89751b3..33e9709ddb 100644
--- a/samples/excel/excel-library/working-with-cells/package.json
+++ b/samples/excel/excel-library/working-with-cells/package.json
@@ -25,15 +25,16 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/excel-library/working-with-cells/webpack.config.js b/samples/excel/excel-library/working-with-cells/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/excel-library/working-with-cells/webpack.config.js
+++ b/samples/excel/excel-library/working-with-cells/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/excel-library/working-with-charts/package.json b/samples/excel/excel-library/working-with-charts/package.json
index a15ae48385..81e76d0c77 100644
--- a/samples/excel/excel-library/working-with-charts/package.json
+++ b/samples/excel/excel-library/working-with-charts/package.json
@@ -25,19 +25,20 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/excel-library/working-with-charts/webpack.config.js b/samples/excel/excel-library/working-with-charts/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/excel-library/working-with-charts/webpack.config.js
+++ b/samples/excel/excel-library/working-with-charts/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/excel-library/working-with-sparklines/package.json b/samples/excel/excel-library/working-with-sparklines/package.json
index a73e0a703c..10371d31cf 100644
--- a/samples/excel/excel-library/working-with-sparklines/package.json
+++ b/samples/excel/excel-library/working-with-sparklines/package.json
@@ -25,19 +25,20 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/excel-library/working-with-sparklines/webpack.config.js b/samples/excel/excel-library/working-with-sparklines/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/excel-library/working-with-sparklines/webpack.config.js
+++ b/samples/excel/excel-library/working-with-sparklines/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/activation/package.json b/samples/excel/spreadsheet/activation/package.json
index 7c77cecd14..24ef52218d 100644
--- a/samples/excel/spreadsheet/activation/package.json
+++ b/samples/excel/spreadsheet/activation/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/activation/webpack.config.js b/samples/excel/spreadsheet/activation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/activation/webpack.config.js
+++ b/samples/excel/spreadsheet/activation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/adapter-chart/package.json b/samples/excel/spreadsheet/adapter-chart/package.json
index b6075ec4cf..b3b27ae9d6 100644
--- a/samples/excel/spreadsheet/adapter-chart/package.json
+++ b/samples/excel/spreadsheet/adapter-chart/package.json
@@ -25,18 +25,19 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
-    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/adapter-chart/webpack.config.js b/samples/excel/spreadsheet/adapter-chart/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/adapter-chart/webpack.config.js
+++ b/samples/excel/spreadsheet/adapter-chart/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/adapter-combo/package.json b/samples/excel/spreadsheet/adapter-combo/package.json
index bac85c9309..c6924f082e 100644
--- a/samples/excel/spreadsheet/adapter-combo/package.json
+++ b/samples/excel/spreadsheet/adapter-combo/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
-    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet-chart-adapter": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/adapter-combo/webpack.config.js b/samples/excel/spreadsheet/adapter-combo/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/adapter-combo/webpack.config.js
+++ b/samples/excel/spreadsheet/adapter-combo/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/clipboard/package.json b/samples/excel/spreadsheet/clipboard/package.json
index ba4538a1ca..0ce49d1d27 100644
--- a/samples/excel/spreadsheet/clipboard/package.json
+++ b/samples/excel/spreadsheet/clipboard/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/clipboard/webpack.config.js b/samples/excel/spreadsheet/clipboard/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/clipboard/webpack.config.js
+++ b/samples/excel/spreadsheet/clipboard/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/commands/package.json b/samples/excel/spreadsheet/commands/package.json
index 792eb49216..0d666ceca4 100644
--- a/samples/excel/spreadsheet/commands/package.json
+++ b/samples/excel/spreadsheet/commands/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/commands/webpack.config.js b/samples/excel/spreadsheet/commands/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/commands/webpack.config.js
+++ b/samples/excel/spreadsheet/commands/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/conditional-formatting/package.json b/samples/excel/spreadsheet/conditional-formatting/package.json
index f4ba8a4fb2..809d6a0a00 100644
--- a/samples/excel/spreadsheet/conditional-formatting/package.json
+++ b/samples/excel/spreadsheet/conditional-formatting/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/conditional-formatting/webpack.config.js b/samples/excel/spreadsheet/conditional-formatting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/conditional-formatting/webpack.config.js
+++ b/samples/excel/spreadsheet/conditional-formatting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/config-options/package.json b/samples/excel/spreadsheet/config-options/package.json
index 8645738acd..b912a91ff8 100644
--- a/samples/excel/spreadsheet/config-options/package.json
+++ b/samples/excel/spreadsheet/config-options/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/config-options/webpack.config.js b/samples/excel/spreadsheet/config-options/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/config-options/webpack.config.js
+++ b/samples/excel/spreadsheet/config-options/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/data-validation/package.json b/samples/excel/spreadsheet/data-validation/package.json
index 5c266d0f7b..fc14f94071 100644
--- a/samples/excel/spreadsheet/data-validation/package.json
+++ b/samples/excel/spreadsheet/data-validation/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/data-validation/webpack.config.js b/samples/excel/spreadsheet/data-validation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/data-validation/webpack.config.js
+++ b/samples/excel/spreadsheet/data-validation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/filter-dialog/package.json b/samples/excel/spreadsheet/filter-dialog/package.json
index 4c91a8e038..7b5784dfd6 100644
--- a/samples/excel/spreadsheet/filter-dialog/package.json
+++ b/samples/excel/spreadsheet/filter-dialog/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/filter-dialog/webpack.config.js b/samples/excel/spreadsheet/filter-dialog/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/filter-dialog/webpack.config.js
+++ b/samples/excel/spreadsheet/filter-dialog/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/format-dialog/package.json b/samples/excel/spreadsheet/format-dialog/package.json
index 3d8529d2a9..1969329f47 100644
--- a/samples/excel/spreadsheet/format-dialog/package.json
+++ b/samples/excel/spreadsheet/format-dialog/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/format-dialog/webpack.config.js b/samples/excel/spreadsheet/format-dialog/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/format-dialog/webpack.config.js
+++ b/samples/excel/spreadsheet/format-dialog/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/hyperlinks/package.json b/samples/excel/spreadsheet/hyperlinks/package.json
index 8113635ee8..25c56debce 100644
--- a/samples/excel/spreadsheet/hyperlinks/package.json
+++ b/samples/excel/spreadsheet/hyperlinks/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/hyperlinks/webpack.config.js b/samples/excel/spreadsheet/hyperlinks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/hyperlinks/webpack.config.js
+++ b/samples/excel/spreadsheet/hyperlinks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/overview/package.json b/samples/excel/spreadsheet/overview/package.json
index bf5b7e4dc5..9d4dbb22a3 100644
--- a/samples/excel/spreadsheet/overview/package.json
+++ b/samples/excel/spreadsheet/overview/package.json
@@ -25,16 +25,17 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "file-saver": "^1.3.8",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/overview/webpack.config.js b/samples/excel/spreadsheet/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/overview/webpack.config.js
+++ b/samples/excel/spreadsheet/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/excel/spreadsheet/sort-dialog/package.json b/samples/excel/spreadsheet/sort-dialog/package.json
index e52d806f60..90aa5b0338 100644
--- a/samples/excel/spreadsheet/sort-dialog/package.json
+++ b/samples/excel/spreadsheet/sort-dialog/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-excel": "5.2.0",
-    "igniteui-webcomponents-spreadsheet": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-excel": "5.2.1-beta.0",
+    "igniteui-webcomponents-spreadsheet": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/excel/spreadsheet/sort-dialog/webpack.config.js b/samples/excel/spreadsheet/sort-dialog/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/excel/spreadsheet/sort-dialog/webpack.config.js
+++ b/samples/excel/spreadsheet/sort-dialog/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/animation/package.json b/samples/gauges/bullet-graph/animation/package.json
index 42b0239a38..05c997bab6 100644
--- a/samples/gauges/bullet-graph/animation/package.json
+++ b/samples/gauges/bullet-graph/animation/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/animation/webpack.config.js b/samples/gauges/bullet-graph/animation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/animation/webpack.config.js
+++ b/samples/gauges/bullet-graph/animation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/background/package.json b/samples/gauges/bullet-graph/background/package.json
index e14dd41029..f145973d9a 100644
--- a/samples/gauges/bullet-graph/background/package.json
+++ b/samples/gauges/bullet-graph/background/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/background/webpack.config.js b/samples/gauges/bullet-graph/background/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/background/webpack.config.js
+++ b/samples/gauges/bullet-graph/background/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/highlight-needle/package.json b/samples/gauges/bullet-graph/highlight-needle/package.json
index a80289f0b6..729152ffeb 100644
--- a/samples/gauges/bullet-graph/highlight-needle/package.json
+++ b/samples/gauges/bullet-graph/highlight-needle/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/highlight-needle/webpack.config.js b/samples/gauges/bullet-graph/highlight-needle/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/highlight-needle/webpack.config.js
+++ b/samples/gauges/bullet-graph/highlight-needle/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/labels/package.json b/samples/gauges/bullet-graph/labels/package.json
index 718bf8ffb9..dd9399678c 100644
--- a/samples/gauges/bullet-graph/labels/package.json
+++ b/samples/gauges/bullet-graph/labels/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/labels/webpack.config.js b/samples/gauges/bullet-graph/labels/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/labels/webpack.config.js
+++ b/samples/gauges/bullet-graph/labels/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/measures/package.json b/samples/gauges/bullet-graph/measures/package.json
index dd894ba399..e7a444f840 100644
--- a/samples/gauges/bullet-graph/measures/package.json
+++ b/samples/gauges/bullet-graph/measures/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/measures/webpack.config.js b/samples/gauges/bullet-graph/measures/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/measures/webpack.config.js
+++ b/samples/gauges/bullet-graph/measures/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/ranges/package.json b/samples/gauges/bullet-graph/ranges/package.json
index dc810d0970..7701719b24 100644
--- a/samples/gauges/bullet-graph/ranges/package.json
+++ b/samples/gauges/bullet-graph/ranges/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/ranges/webpack.config.js b/samples/gauges/bullet-graph/ranges/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/ranges/webpack.config.js
+++ b/samples/gauges/bullet-graph/ranges/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/scale/package.json b/samples/gauges/bullet-graph/scale/package.json
index c6cbed2a5a..d4d340d07e 100644
--- a/samples/gauges/bullet-graph/scale/package.json
+++ b/samples/gauges/bullet-graph/scale/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/scale/webpack.config.js b/samples/gauges/bullet-graph/scale/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/scale/webpack.config.js
+++ b/samples/gauges/bullet-graph/scale/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/tickmarks/package.json b/samples/gauges/bullet-graph/tickmarks/package.json
index a6db447ea9..21dd04cdef 100644
--- a/samples/gauges/bullet-graph/tickmarks/package.json
+++ b/samples/gauges/bullet-graph/tickmarks/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/tickmarks/webpack.config.js b/samples/gauges/bullet-graph/tickmarks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/tickmarks/webpack.config.js
+++ b/samples/gauges/bullet-graph/tickmarks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/type-filled/package.json b/samples/gauges/bullet-graph/type-filled/package.json
index 7b6ad5ad0f..fa1cf10e79 100644
--- a/samples/gauges/bullet-graph/type-filled/package.json
+++ b/samples/gauges/bullet-graph/type-filled/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/type-filled/webpack.config.js b/samples/gauges/bullet-graph/type-filled/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/type-filled/webpack.config.js
+++ b/samples/gauges/bullet-graph/type-filled/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/type-horizontal/package.json b/samples/gauges/bullet-graph/type-horizontal/package.json
index b60087e425..fe3d318b30 100644
--- a/samples/gauges/bullet-graph/type-horizontal/package.json
+++ b/samples/gauges/bullet-graph/type-horizontal/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/type-horizontal/webpack.config.js b/samples/gauges/bullet-graph/type-horizontal/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/type-horizontal/webpack.config.js
+++ b/samples/gauges/bullet-graph/type-horizontal/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/type-reversed/package.json b/samples/gauges/bullet-graph/type-reversed/package.json
index ae9997c0a5..9b5f588468 100644
--- a/samples/gauges/bullet-graph/type-reversed/package.json
+++ b/samples/gauges/bullet-graph/type-reversed/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/type-reversed/webpack.config.js b/samples/gauges/bullet-graph/type-reversed/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/type-reversed/webpack.config.js
+++ b/samples/gauges/bullet-graph/type-reversed/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/type-segmented/package.json b/samples/gauges/bullet-graph/type-segmented/package.json
index 86aee69db0..3a2f0a808e 100644
--- a/samples/gauges/bullet-graph/type-segmented/package.json
+++ b/samples/gauges/bullet-graph/type-segmented/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/type-segmented/webpack.config.js b/samples/gauges/bullet-graph/type-segmented/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/type-segmented/webpack.config.js
+++ b/samples/gauges/bullet-graph/type-segmented/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/bullet-graph/type-vertical/package.json b/samples/gauges/bullet-graph/type-vertical/package.json
index 9df5003df8..9ee8ee7919 100644
--- a/samples/gauges/bullet-graph/type-vertical/package.json
+++ b/samples/gauges/bullet-graph/type-vertical/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/bullet-graph/type-vertical/webpack.config.js b/samples/gauges/bullet-graph/type-vertical/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/bullet-graph/type-vertical/webpack.config.js
+++ b/samples/gauges/bullet-graph/type-vertical/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/animation/package.json b/samples/gauges/linear-gauge/animation/package.json
index 282b82f9fc..848bb9691a 100644
--- a/samples/gauges/linear-gauge/animation/package.json
+++ b/samples/gauges/linear-gauge/animation/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/animation/webpack.config.js b/samples/gauges/linear-gauge/animation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/animation/webpack.config.js
+++ b/samples/gauges/linear-gauge/animation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/backing/package.json b/samples/gauges/linear-gauge/backing/package.json
index 04932bfa35..5221e27ebc 100644
--- a/samples/gauges/linear-gauge/backing/package.json
+++ b/samples/gauges/linear-gauge/backing/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/backing/webpack.config.js b/samples/gauges/linear-gauge/backing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/backing/webpack.config.js
+++ b/samples/gauges/linear-gauge/backing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/highlight-needle/package.json b/samples/gauges/linear-gauge/highlight-needle/package.json
index fe0a1652e7..fe143375dc 100644
--- a/samples/gauges/linear-gauge/highlight-needle/package.json
+++ b/samples/gauges/linear-gauge/highlight-needle/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/highlight-needle/webpack.config.js b/samples/gauges/linear-gauge/highlight-needle/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/highlight-needle/webpack.config.js
+++ b/samples/gauges/linear-gauge/highlight-needle/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/labels/package.json b/samples/gauges/linear-gauge/labels/package.json
index ddf07f42e1..0b4fe790f7 100644
--- a/samples/gauges/linear-gauge/labels/package.json
+++ b/samples/gauges/linear-gauge/labels/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/labels/webpack.config.js b/samples/gauges/linear-gauge/labels/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/labels/webpack.config.js
+++ b/samples/gauges/linear-gauge/labels/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/needle/package.json b/samples/gauges/linear-gauge/needle/package.json
index 61119b22af..d35beea65c 100644
--- a/samples/gauges/linear-gauge/needle/package.json
+++ b/samples/gauges/linear-gauge/needle/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/needle/webpack.config.js b/samples/gauges/linear-gauge/needle/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/needle/webpack.config.js
+++ b/samples/gauges/linear-gauge/needle/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/ranges/package.json b/samples/gauges/linear-gauge/ranges/package.json
index 64c95d10b7..4a992098a8 100644
--- a/samples/gauges/linear-gauge/ranges/package.json
+++ b/samples/gauges/linear-gauge/ranges/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/ranges/webpack.config.js b/samples/gauges/linear-gauge/ranges/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/ranges/webpack.config.js
+++ b/samples/gauges/linear-gauge/ranges/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/scale/package.json b/samples/gauges/linear-gauge/scale/package.json
index ffe7c5f20d..e4059902cf 100644
--- a/samples/gauges/linear-gauge/scale/package.json
+++ b/samples/gauges/linear-gauge/scale/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/scale/webpack.config.js b/samples/gauges/linear-gauge/scale/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/scale/webpack.config.js
+++ b/samples/gauges/linear-gauge/scale/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/tickmarks/package.json b/samples/gauges/linear-gauge/tickmarks/package.json
index a2e8f6a950..98ffbcd562 100644
--- a/samples/gauges/linear-gauge/tickmarks/package.json
+++ b/samples/gauges/linear-gauge/tickmarks/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/tickmarks/webpack.config.js b/samples/gauges/linear-gauge/tickmarks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/tickmarks/webpack.config.js
+++ b/samples/gauges/linear-gauge/tickmarks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-curved/package.json b/samples/gauges/linear-gauge/type-curved/package.json
index 1e65e0f0be..8ce6fb206f 100644
--- a/samples/gauges/linear-gauge/type-curved/package.json
+++ b/samples/gauges/linear-gauge/type-curved/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-curved/webpack.config.js b/samples/gauges/linear-gauge/type-curved/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-curved/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-curved/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-filled/package.json b/samples/gauges/linear-gauge/type-filled/package.json
index 687ad63bf2..a9ee3c8957 100644
--- a/samples/gauges/linear-gauge/type-filled/package.json
+++ b/samples/gauges/linear-gauge/type-filled/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-filled/webpack.config.js b/samples/gauges/linear-gauge/type-filled/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-filled/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-filled/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-horizontal/package.json b/samples/gauges/linear-gauge/type-horizontal/package.json
index 3a905977fc..95322cf3c5 100644
--- a/samples/gauges/linear-gauge/type-horizontal/package.json
+++ b/samples/gauges/linear-gauge/type-horizontal/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-horizontal/webpack.config.js b/samples/gauges/linear-gauge/type-horizontal/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-horizontal/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-horizontal/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-multi-range/package.json b/samples/gauges/linear-gauge/type-multi-range/package.json
index 3975703efb..d028fcc36a 100644
--- a/samples/gauges/linear-gauge/type-multi-range/package.json
+++ b/samples/gauges/linear-gauge/type-multi-range/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-multi-range/webpack.config.js b/samples/gauges/linear-gauge/type-multi-range/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-multi-range/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-multi-range/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-multi-scale/package.json b/samples/gauges/linear-gauge/type-multi-scale/package.json
index cf02570cad..248410218e 100644
--- a/samples/gauges/linear-gauge/type-multi-scale/package.json
+++ b/samples/gauges/linear-gauge/type-multi-scale/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-multi-scale/webpack.config.js b/samples/gauges/linear-gauge/type-multi-scale/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-multi-scale/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-multi-scale/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-segmented/package.json b/samples/gauges/linear-gauge/type-segmented/package.json
index b7c60f8aaf..cfcf491c4d 100644
--- a/samples/gauges/linear-gauge/type-segmented/package.json
+++ b/samples/gauges/linear-gauge/type-segmented/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-segmented/webpack.config.js b/samples/gauges/linear-gauge/type-segmented/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-segmented/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-segmented/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/linear-gauge/type-vertical/package.json b/samples/gauges/linear-gauge/type-vertical/package.json
index 934e6cb69f..b3f9dd82e8 100644
--- a/samples/gauges/linear-gauge/type-vertical/package.json
+++ b/samples/gauges/linear-gauge/type-vertical/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/linear-gauge/type-vertical/webpack.config.js b/samples/gauges/linear-gauge/type-vertical/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/linear-gauge/type-vertical/webpack.config.js
+++ b/samples/gauges/linear-gauge/type-vertical/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/animation/package.json b/samples/gauges/radial-gauge/animation/package.json
index b096f25255..32290c2fd1 100644
--- a/samples/gauges/radial-gauge/animation/package.json
+++ b/samples/gauges/radial-gauge/animation/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/animation/webpack.config.js b/samples/gauges/radial-gauge/animation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/animation/webpack.config.js
+++ b/samples/gauges/radial-gauge/animation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/backing/package.json b/samples/gauges/radial-gauge/backing/package.json
index b0bf3923c9..558cbd993c 100644
--- a/samples/gauges/radial-gauge/backing/package.json
+++ b/samples/gauges/radial-gauge/backing/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/backing/webpack.config.js b/samples/gauges/radial-gauge/backing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/backing/webpack.config.js
+++ b/samples/gauges/radial-gauge/backing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/highlight-needle/package.json b/samples/gauges/radial-gauge/highlight-needle/package.json
index c8927c59d5..760effaa2e 100644
--- a/samples/gauges/radial-gauge/highlight-needle/package.json
+++ b/samples/gauges/radial-gauge/highlight-needle/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/highlight-needle/webpack.config.js b/samples/gauges/radial-gauge/highlight-needle/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/highlight-needle/webpack.config.js
+++ b/samples/gauges/radial-gauge/highlight-needle/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/labels/package.json b/samples/gauges/radial-gauge/labels/package.json
index 724bf2bd88..bb81948bd5 100644
--- a/samples/gauges/radial-gauge/labels/package.json
+++ b/samples/gauges/radial-gauge/labels/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/labels/webpack.config.js b/samples/gauges/radial-gauge/labels/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/labels/webpack.config.js
+++ b/samples/gauges/radial-gauge/labels/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/needle/package.json b/samples/gauges/radial-gauge/needle/package.json
index 7e1381c3e0..9a51f05c03 100644
--- a/samples/gauges/radial-gauge/needle/package.json
+++ b/samples/gauges/radial-gauge/needle/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/needle/webpack.config.js b/samples/gauges/radial-gauge/needle/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/needle/webpack.config.js
+++ b/samples/gauges/radial-gauge/needle/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/optical-scaling/package.json b/samples/gauges/radial-gauge/optical-scaling/package.json
index 724bf2bd88..bb81948bd5 100644
--- a/samples/gauges/radial-gauge/optical-scaling/package.json
+++ b/samples/gauges/radial-gauge/optical-scaling/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/optical-scaling/webpack.config.js b/samples/gauges/radial-gauge/optical-scaling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/optical-scaling/webpack.config.js
+++ b/samples/gauges/radial-gauge/optical-scaling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/ranges/package.json b/samples/gauges/radial-gauge/ranges/package.json
index 8c23d5ebac..fa0cfed118 100644
--- a/samples/gauges/radial-gauge/ranges/package.json
+++ b/samples/gauges/radial-gauge/ranges/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/ranges/webpack.config.js b/samples/gauges/radial-gauge/ranges/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/ranges/webpack.config.js
+++ b/samples/gauges/radial-gauge/ranges/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/scale/package.json b/samples/gauges/radial-gauge/scale/package.json
index fb1237ac00..9b36aa156d 100644
--- a/samples/gauges/radial-gauge/scale/package.json
+++ b/samples/gauges/radial-gauge/scale/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/scale/webpack.config.js b/samples/gauges/radial-gauge/scale/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/scale/webpack.config.js
+++ b/samples/gauges/radial-gauge/scale/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/tickmarks/package.json b/samples/gauges/radial-gauge/tickmarks/package.json
index df388d0f10..840dbd001a 100644
--- a/samples/gauges/radial-gauge/tickmarks/package.json
+++ b/samples/gauges/radial-gauge/tickmarks/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/tickmarks/webpack.config.js b/samples/gauges/radial-gauge/tickmarks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/tickmarks/webpack.config.js
+++ b/samples/gauges/radial-gauge/tickmarks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-column/package.json b/samples/gauges/radial-gauge/type-column/package.json
index 3cacf2cd38..afbd42d58e 100644
--- a/samples/gauges/radial-gauge/type-column/package.json
+++ b/samples/gauges/radial-gauge/type-column/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-column/webpack.config.js b/samples/gauges/radial-gauge/type-column/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-column/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-column/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-curved/package.json b/samples/gauges/radial-gauge/type-curved/package.json
index ff584db7d5..8da7a2cef3 100644
--- a/samples/gauges/radial-gauge/type-curved/package.json
+++ b/samples/gauges/radial-gauge/type-curved/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-curved/webpack.config.js b/samples/gauges/radial-gauge/type-curved/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-curved/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-curved/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-direction/package.json b/samples/gauges/radial-gauge/type-direction/package.json
index d1d852a912..77223df959 100644
--- a/samples/gauges/radial-gauge/type-direction/package.json
+++ b/samples/gauges/radial-gauge/type-direction/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-direction/webpack.config.js b/samples/gauges/radial-gauge/type-direction/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-direction/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-direction/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-full/package.json b/samples/gauges/radial-gauge/type-full/package.json
index e6255ce0ce..be0690a780 100644
--- a/samples/gauges/radial-gauge/type-full/package.json
+++ b/samples/gauges/radial-gauge/type-full/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-full/webpack.config.js b/samples/gauges/radial-gauge/type-full/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-full/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-full/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-half/package.json b/samples/gauges/radial-gauge/type-half/package.json
index a2a658035f..9e9807b18a 100644
--- a/samples/gauges/radial-gauge/type-half/package.json
+++ b/samples/gauges/radial-gauge/type-half/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-half/webpack.config.js b/samples/gauges/radial-gauge/type-half/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-half/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-half/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-quatre/package.json b/samples/gauges/radial-gauge/type-quatre/package.json
index 7477f2d5c3..ea72776457 100644
--- a/samples/gauges/radial-gauge/type-quatre/package.json
+++ b/samples/gauges/radial-gauge/type-quatre/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-quatre/webpack.config.js b/samples/gauges/radial-gauge/type-quatre/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-quatre/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-quatre/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-ring/package.json b/samples/gauges/radial-gauge/type-ring/package.json
index e419548de7..48b8094a9b 100644
--- a/samples/gauges/radial-gauge/type-ring/package.json
+++ b/samples/gauges/radial-gauge/type-ring/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-ring/webpack.config.js b/samples/gauges/radial-gauge/type-ring/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-ring/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-ring/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-segmented/package.json b/samples/gauges/radial-gauge/type-segmented/package.json
index b857a63d33..0605633146 100644
--- a/samples/gauges/radial-gauge/type-segmented/package.json
+++ b/samples/gauges/radial-gauge/type-segmented/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-segmented/webpack.config.js b/samples/gauges/radial-gauge/type-segmented/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-segmented/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-segmented/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/gauges/radial-gauge/type-semi/package.json b/samples/gauges/radial-gauge/type-semi/package.json
index fd39039583..2f08d544d8 100644
--- a/samples/gauges/radial-gauge/type-semi/package.json
+++ b/samples/gauges/radial-gauge/type-semi/package.json
@@ -23,15 +23,16 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/gauges/radial-gauge/type-semi/webpack.config.js b/samples/gauges/radial-gauge/type-semi/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/gauges/radial-gauge/type-semi/webpack.config.js
+++ b/samples/gauges/radial-gauge/type-semi/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/accessibility/package.json b/samples/grids/data-grid/accessibility/package.json
index 94a0622c4d..b6a2c24b71 100644
--- a/samples/grids/data-grid/accessibility/package.json
+++ b/samples/grids/data-grid/accessibility/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/accessibility/webpack.config.js b/samples/grids/data-grid/accessibility/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/accessibility/webpack.config.js
+++ b/samples/grids/data-grid/accessibility/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/binding-data-service/package.json b/samples/grids/data-grid/binding-data-service/package.json
index 031743e3bf..7def41e33d 100644
--- a/samples/grids/data-grid/binding-data-service/package.json
+++ b/samples/grids/data-grid/binding-data-service/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/binding-data-service/webpack.config.js b/samples/grids/data-grid/binding-data-service/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/binding-data-service/webpack.config.js
+++ b/samples/grids/data-grid/binding-data-service/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/binding-live-data/package.json b/samples/grids/data-grid/binding-live-data/package.json
index ba4d744d7e..07e0ce2bf1 100644
--- a/samples/grids/data-grid/binding-live-data/package.json
+++ b/samples/grids/data-grid/binding-live-data/package.json
@@ -29,18 +29,19 @@
     "@webcomponents/webcomponentsjs": "2.3.0",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/binding-live-data/webpack.config.js b/samples/grids/data-grid/binding-live-data/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/binding-live-data/webpack.config.js
+++ b/samples/grids/data-grid/binding-live-data/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/binding-local-data/package.json b/samples/grids/data-grid/binding-local-data/package.json
index 83f3a6a287..8e65cd2c5b 100644
--- a/samples/grids/data-grid/binding-local-data/package.json
+++ b/samples/grids/data-grid/binding-local-data/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/binding-local-data/webpack.config.js b/samples/grids/data-grid/binding-local-data/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/binding-local-data/webpack.config.js
+++ b/samples/grids/data-grid/binding-local-data/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/binding-remote-data/package.json b/samples/grids/data-grid/binding-remote-data/package.json
index df2bfb2a9f..1cc80fa7fc 100644
--- a/samples/grids/data-grid/binding-remote-data/package.json
+++ b/samples/grids/data-grid/binding-remote-data/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-datasources": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/binding-remote-data/webpack.config.js b/samples/grids/data-grid/binding-remote-data/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/binding-remote-data/webpack.config.js
+++ b/samples/grids/data-grid/binding-remote-data/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/cell-activation/package.json b/samples/grids/data-grid/cell-activation/package.json
index 03ec904f1d..d652da80a4 100644
--- a/samples/grids/data-grid/cell-activation/package.json
+++ b/samples/grids/data-grid/cell-activation/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/cell-activation/webpack.config.js b/samples/grids/data-grid/cell-activation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/cell-activation/webpack.config.js
+++ b/samples/grids/data-grid/cell-activation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/cell-editing/package.json b/samples/grids/data-grid/cell-editing/package.json
index 2973f8f399..07a2f0e26b 100644
--- a/samples/grids/data-grid/cell-editing/package.json
+++ b/samples/grids/data-grid/cell-editing/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/cell-editing/webpack.config.js b/samples/grids/data-grid/cell-editing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/cell-editing/webpack.config.js
+++ b/samples/grids/data-grid/cell-editing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/cell-merging/package.json b/samples/grids/data-grid/cell-merging/package.json
index 8e6d2ee6a7..dbd39a89b7 100644
--- a/samples/grids/data-grid/cell-merging/package.json
+++ b/samples/grids/data-grid/cell-merging/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-datasources": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/cell-merging/webpack.config.js b/samples/grids/data-grid/cell-merging/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/cell-merging/webpack.config.js
+++ b/samples/grids/data-grid/cell-merging/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/cell-selection/package.json b/samples/grids/data-grid/cell-selection/package.json
index dcde67d5aa..bc08d9edde 100644
--- a/samples/grids/data-grid/cell-selection/package.json
+++ b/samples/grids/data-grid/cell-selection/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/cell-selection/webpack.config.js b/samples/grids/data-grid/cell-selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/cell-selection/webpack.config.js
+++ b/samples/grids/data-grid/cell-selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-animation/package.json b/samples/grids/data-grid/column-animation/package.json
index 208a56a1e6..70b1aa4810 100644
--- a/samples/grids/data-grid/column-animation/package.json
+++ b/samples/grids/data-grid/column-animation/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-animation/webpack.config.js b/samples/grids/data-grid/column-animation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-animation/webpack.config.js
+++ b/samples/grids/data-grid/column-animation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-chooser-picker/package.json b/samples/grids/data-grid/column-chooser-picker/package.json
index 9ba89c4f9b..8ad81c7352 100644
--- a/samples/grids/data-grid/column-chooser-picker/package.json
+++ b/samples/grids/data-grid/column-chooser-picker/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-chooser-picker/webpack.config.js b/samples/grids/data-grid/column-chooser-picker/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-chooser-picker/webpack.config.js
+++ b/samples/grids/data-grid/column-chooser-picker/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-chooser-toolbar/package.json b/samples/grids/data-grid/column-chooser-toolbar/package.json
index 2c259d846f..63c45a34b1 100644
--- a/samples/grids/data-grid/column-chooser-toolbar/package.json
+++ b/samples/grids/data-grid/column-chooser-toolbar/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-chooser-toolbar/webpack.config.js b/samples/grids/data-grid/column-chooser-toolbar/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-chooser-toolbar/webpack.config.js
+++ b/samples/grids/data-grid/column-chooser-toolbar/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-filter-expressions/package.json b/samples/grids/data-grid/column-filter-expressions/package.json
index 1ada5fe851..d4b70a6336 100644
--- a/samples/grids/data-grid/column-filter-expressions/package.json
+++ b/samples/grids/data-grid/column-filter-expressions/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-filter-expressions/webpack.config.js b/samples/grids/data-grid/column-filter-expressions/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-filter-expressions/webpack.config.js
+++ b/samples/grids/data-grid/column-filter-expressions/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-filter-operands/package.json b/samples/grids/data-grid/column-filter-operands/package.json
index bb3573864e..8e4cb8b4e0 100644
--- a/samples/grids/data-grid/column-filter-operands/package.json
+++ b/samples/grids/data-grid/column-filter-operands/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-filter-operands/webpack.config.js b/samples/grids/data-grid/column-filter-operands/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-filter-operands/webpack.config.js
+++ b/samples/grids/data-grid/column-filter-operands/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-filtering/package.json b/samples/grids/data-grid/column-filtering/package.json
index b6539bc4a3..8bc801ea96 100644
--- a/samples/grids/data-grid/column-filtering/package.json
+++ b/samples/grids/data-grid/column-filtering/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-filtering/webpack.config.js b/samples/grids/data-grid/column-filtering/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-filtering/webpack.config.js
+++ b/samples/grids/data-grid/column-filtering/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-moving/package.json b/samples/grids/data-grid/column-moving/package.json
index 1f3cb479f4..145bebe9d0 100644
--- a/samples/grids/data-grid/column-moving/package.json
+++ b/samples/grids/data-grid/column-moving/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-moving/webpack.config.js b/samples/grids/data-grid/column-moving/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-moving/webpack.config.js
+++ b/samples/grids/data-grid/column-moving/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-options/package.json b/samples/grids/data-grid/column-options/package.json
index 666ad1be25..d948c00feb 100644
--- a/samples/grids/data-grid/column-options/package.json
+++ b/samples/grids/data-grid/column-options/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-options/webpack.config.js b/samples/grids/data-grid/column-options/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-options/webpack.config.js
+++ b/samples/grids/data-grid/column-options/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-pinning-picker/package.json b/samples/grids/data-grid/column-pinning-picker/package.json
index d2309add21..83dc21cd71 100644
--- a/samples/grids/data-grid/column-pinning-picker/package.json
+++ b/samples/grids/data-grid/column-pinning-picker/package.json
@@ -25,17 +25,18 @@
     "@webcomponents/webcomponentsjs": "2.3.0",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-pinning-picker/webpack.config.js b/samples/grids/data-grid/column-pinning-picker/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-pinning-picker/webpack.config.js
+++ b/samples/grids/data-grid/column-pinning-picker/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-pinning-toolbar/package.json b/samples/grids/data-grid/column-pinning-toolbar/package.json
index 8f7e1bd1ad..f04894ba8c 100644
--- a/samples/grids/data-grid/column-pinning-toolbar/package.json
+++ b/samples/grids/data-grid/column-pinning-toolbar/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-pinning-toolbar/webpack.config.js b/samples/grids/data-grid/column-pinning-toolbar/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-pinning-toolbar/webpack.config.js
+++ b/samples/grids/data-grid/column-pinning-toolbar/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-resizing/package.json b/samples/grids/data-grid/column-resizing/package.json
index 876cfe7f92..6ef2dea9f6 100644
--- a/samples/grids/data-grid/column-resizing/package.json
+++ b/samples/grids/data-grid/column-resizing/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-resizing/webpack.config.js b/samples/grids/data-grid/column-resizing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-resizing/webpack.config.js
+++ b/samples/grids/data-grid/column-resizing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-scrolling/package.json b/samples/grids/data-grid/column-scrolling/package.json
index 35f8d63990..bad09208dd 100644
--- a/samples/grids/data-grid/column-scrolling/package.json
+++ b/samples/grids/data-grid/column-scrolling/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-scrolling/webpack.config.js b/samples/grids/data-grid/column-scrolling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-scrolling/webpack.config.js
+++ b/samples/grids/data-grid/column-scrolling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-sorting/package.json b/samples/grids/data-grid/column-sorting/package.json
index 09253e88af..cdbbf4cfde 100644
--- a/samples/grids/data-grid/column-sorting/package.json
+++ b/samples/grids/data-grid/column-sorting/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-sorting/webpack.config.js b/samples/grids/data-grid/column-sorting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-sorting/webpack.config.js
+++ b/samples/grids/data-grid/column-sorting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-summaries/package.json b/samples/grids/data-grid/column-summaries/package.json
index fb323abbb5..2d565d0a25 100644
--- a/samples/grids/data-grid/column-summaries/package.json
+++ b/samples/grids/data-grid/column-summaries/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-summaries/webpack.config.js b/samples/grids/data-grid/column-summaries/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-summaries/webpack.config.js
+++ b/samples/grids/data-grid/column-summaries/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/column-types/package.json b/samples/grids/data-grid/column-types/package.json
index 072bc5f6ca..827cea80cd 100644
--- a/samples/grids/data-grid/column-types/package.json
+++ b/samples/grids/data-grid/column-types/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/column-types/webpack.config.js b/samples/grids/data-grid/column-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/column-types/webpack.config.js
+++ b/samples/grids/data-grid/column-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/load-save-layout/package.json b/samples/grids/data-grid/load-save-layout/package.json
index 08230c542a..58f5a5d716 100644
--- a/samples/grids/data-grid/load-save-layout/package.json
+++ b/samples/grids/data-grid/load-save-layout/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/load-save-layout/webpack.config.js b/samples/grids/data-grid/load-save-layout/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/load-save-layout/webpack.config.js
+++ b/samples/grids/data-grid/load-save-layout/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/localization/package.json b/samples/grids/data-grid/localization/package.json
index 5330d24630..68d36ea644 100644
--- a/samples/grids/data-grid/localization/package.json
+++ b/samples/grids/data-grid/localization/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/localization/webpack.config.js b/samples/grids/data-grid/localization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/localization/webpack.config.js
+++ b/samples/grids/data-grid/localization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/overview/package.json b/samples/grids/data-grid/overview/package.json
index 1084d86d8c..ba42e52e23 100644
--- a/samples/grids/data-grid/overview/package.json
+++ b/samples/grids/data-grid/overview/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/overview/webpack.config.js b/samples/grids/data-grid/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/overview/webpack.config.js
+++ b/samples/grids/data-grid/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/pager/package.json b/samples/grids/data-grid/pager/package.json
index 03c41c7cf8..597266f9ad 100644
--- a/samples/grids/data-grid/pager/package.json
+++ b/samples/grids/data-grid/pager/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/pager/webpack.config.js b/samples/grids/data-grid/pager/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/pager/webpack.config.js
+++ b/samples/grids/data-grid/pager/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/performance/package.json b/samples/grids/data-grid/performance/package.json
index 4ded553f23..55daf9c80a 100644
--- a/samples/grids/data-grid/performance/package.json
+++ b/samples/grids/data-grid/performance/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/performance/webpack.config.js b/samples/grids/data-grid/performance/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/performance/webpack.config.js
+++ b/samples/grids/data-grid/performance/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/row-group-descriptions/package.json b/samples/grids/data-grid/row-group-descriptions/package.json
index 33ccbe36e6..d274980403 100644
--- a/samples/grids/data-grid/row-group-descriptions/package.json
+++ b/samples/grids/data-grid/row-group-descriptions/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/row-group-descriptions/webpack.config.js b/samples/grids/data-grid/row-group-descriptions/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/row-group-descriptions/webpack.config.js
+++ b/samples/grids/data-grid/row-group-descriptions/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/row-grouping/package.json b/samples/grids/data-grid/row-grouping/package.json
index 33ccbe36e6..d274980403 100644
--- a/samples/grids/data-grid/row-grouping/package.json
+++ b/samples/grids/data-grid/row-grouping/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/row-grouping/webpack.config.js b/samples/grids/data-grid/row-grouping/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/row-grouping/webpack.config.js
+++ b/samples/grids/data-grid/row-grouping/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/row-highlighting/package.json b/samples/grids/data-grid/row-highlighting/package.json
index 9da8452589..cd7323d5b9 100644
--- a/samples/grids/data-grid/row-highlighting/package.json
+++ b/samples/grids/data-grid/row-highlighting/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/row-highlighting/webpack.config.js b/samples/grids/data-grid/row-highlighting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/row-highlighting/webpack.config.js
+++ b/samples/grids/data-grid/row-highlighting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/row-paging/package.json b/samples/grids/data-grid/row-paging/package.json
index 76266786ff..202a408081 100644
--- a/samples/grids/data-grid/row-paging/package.json
+++ b/samples/grids/data-grid/row-paging/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/row-paging/webpack.config.js b/samples/grids/data-grid/row-paging/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/row-paging/webpack.config.js
+++ b/samples/grids/data-grid/row-paging/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/row-pinning/package.json b/samples/grids/data-grid/row-pinning/package.json
index 0da01d4d32..996993a418 100644
--- a/samples/grids/data-grid/row-pinning/package.json
+++ b/samples/grids/data-grid/row-pinning/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/row-pinning/webpack.config.js b/samples/grids/data-grid/row-pinning/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/row-pinning/webpack.config.js
+++ b/samples/grids/data-grid/row-pinning/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/row-selection/package.json b/samples/grids/data-grid/row-selection/package.json
index dcde67d5aa..bc08d9edde 100644
--- a/samples/grids/data-grid/row-selection/package.json
+++ b/samples/grids/data-grid/row-selection/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/row-selection/webpack.config.js b/samples/grids/data-grid/row-selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/row-selection/webpack.config.js
+++ b/samples/grids/data-grid/row-selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/type-comparison-table/package.json b/samples/grids/data-grid/type-comparison-table/package.json
index be0a310814..d14bda2f61 100644
--- a/samples/grids/data-grid/type-comparison-table/package.json
+++ b/samples/grids/data-grid/type-comparison-table/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-datasources": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-datasources": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/type-comparison-table/webpack.config.js b/samples/grids/data-grid/type-comparison-table/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/type-comparison-table/webpack.config.js
+++ b/samples/grids/data-grid/type-comparison-table/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/type-heatmap-table/package.json b/samples/grids/data-grid/type-heatmap-table/package.json
index 518e864fc0..760fe2389b 100644
--- a/samples/grids/data-grid/type-heatmap-table/package.json
+++ b/samples/grids/data-grid/type-heatmap-table/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/type-heatmap-table/webpack.config.js b/samples/grids/data-grid/type-heatmap-table/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/type-heatmap-table/webpack.config.js
+++ b/samples/grids/data-grid/type-heatmap-table/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/type-marketing-table/package.json b/samples/grids/data-grid/type-marketing-table/package.json
index 252562f3ca..7a067be5b2 100644
--- a/samples/grids/data-grid/type-marketing-table/package.json
+++ b/samples/grids/data-grid/type-marketing-table/package.json
@@ -23,18 +23,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/type-marketing-table/webpack.config.js b/samples/grids/data-grid/type-marketing-table/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/type-marketing-table/webpack.config.js
+++ b/samples/grids/data-grid/type-marketing-table/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/type-matrix-table/package.json b/samples/grids/data-grid/type-matrix-table/package.json
index 8cc720c340..1d624fa3eb 100644
--- a/samples/grids/data-grid/type-matrix-table/package.json
+++ b/samples/grids/data-grid/type-matrix-table/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/type-matrix-table/webpack.config.js b/samples/grids/data-grid/type-matrix-table/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/type-matrix-table/webpack.config.js
+++ b/samples/grids/data-grid/type-matrix-table/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/type-periodic-table/package.json b/samples/grids/data-grid/type-periodic-table/package.json
index 7c688b77db..1676f85cd5 100644
--- a/samples/grids/data-grid/type-periodic-table/package.json
+++ b/samples/grids/data-grid/type-periodic-table/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/type-periodic-table/webpack.config.js b/samples/grids/data-grid/type-periodic-table/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/type-periodic-table/webpack.config.js
+++ b/samples/grids/data-grid/type-periodic-table/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/data-grid/type-table/package.json b/samples/grids/data-grid/type-table/package.json
index f334da6fa3..d3a8eeb620 100644
--- a/samples/grids/data-grid/type-table/package.json
+++ b/samples/grids/data-grid/type-table/package.json
@@ -23,17 +23,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/data-grid/type-table/webpack.config.js b/samples/grids/data-grid/type-table/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/data-grid/type-table/webpack.config.js
+++ b/samples/grids/data-grid/type-table/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/action-strip/package.json b/samples/grids/grid/action-strip/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/action-strip/package.json
+++ b/samples/grids/grid/action-strip/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/action-strip/webpack.config.js b/samples/grids/grid/action-strip/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/action-strip/webpack.config.js
+++ b/samples/grids/grid/action-strip/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/advanced-filtering-options/package.json b/samples/grids/grid/advanced-filtering-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/advanced-filtering-options/package.json
+++ b/samples/grids/grid/advanced-filtering-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/advanced-filtering-options/webpack.config.js b/samples/grids/grid/advanced-filtering-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/advanced-filtering-options/webpack.config.js
+++ b/samples/grids/grid/advanced-filtering-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/advanced-filtering-style/package.json b/samples/grids/grid/advanced-filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/advanced-filtering-style/package.json
+++ b/samples/grids/grid/advanced-filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/advanced-filtering-style/webpack.config.js b/samples/grids/grid/advanced-filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/advanced-filtering-style/webpack.config.js
+++ b/samples/grids/grid/advanced-filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/binding-composite-data/package.json b/samples/grids/grid/binding-composite-data/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/binding-composite-data/package.json
+++ b/samples/grids/grid/binding-composite-data/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/binding-composite-data/webpack.config.js b/samples/grids/grid/binding-composite-data/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/binding-composite-data/webpack.config.js
+++ b/samples/grids/grid/binding-composite-data/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/binding-crud-data/package.json b/samples/grids/grid/binding-crud-data/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/binding-crud-data/package.json
+++ b/samples/grids/grid/binding-crud-data/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/binding-crud-data/webpack.config.js b/samples/grids/grid/binding-crud-data/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/binding-crud-data/webpack.config.js
+++ b/samples/grids/grid/binding-crud-data/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/binding-nested-data-1/package.json b/samples/grids/grid/binding-nested-data-1/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/binding-nested-data-1/package.json
+++ b/samples/grids/grid/binding-nested-data-1/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/binding-nested-data-1/webpack.config.js b/samples/grids/grid/binding-nested-data-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/binding-nested-data-1/webpack.config.js
+++ b/samples/grids/grid/binding-nested-data-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/cascading-combo/package.json b/samples/grids/grid/cascading-combo/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/cascading-combo/package.json
+++ b/samples/grids/grid/cascading-combo/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/cascading-combo/webpack.config.js b/samples/grids/grid/cascading-combo/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/cascading-combo/webpack.config.js
+++ b/samples/grids/grid/cascading-combo/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/cell-editing-sample/package.json b/samples/grids/grid/cell-editing-sample/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/cell-editing-sample/package.json
+++ b/samples/grids/grid/cell-editing-sample/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/cell-editing-sample/webpack.config.js b/samples/grids/grid/cell-editing-sample/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/cell-editing-sample/webpack.config.js
+++ b/samples/grids/grid/cell-editing-sample/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/cell-editing-styling/package.json b/samples/grids/grid/cell-editing-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/cell-editing-styling/package.json
+++ b/samples/grids/grid/cell-editing-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/cell-editing-styling/webpack.config.js b/samples/grids/grid/cell-editing-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/cell-editing-styling/webpack.config.js
+++ b/samples/grids/grid/cell-editing-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/cell-selection-mode/package.json b/samples/grids/grid/cell-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/cell-selection-mode/package.json
+++ b/samples/grids/grid/cell-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/cell-selection-mode/webpack.config.js b/samples/grids/grid/cell-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/cell-selection-mode/webpack.config.js
+++ b/samples/grids/grid/cell-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/cell-selection-style/package.json b/samples/grids/grid/cell-selection-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/cell-selection-style/package.json
+++ b/samples/grids/grid/cell-selection-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/cell-selection-style/webpack.config.js b/samples/grids/grid/cell-selection-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/cell-selection-style/webpack.config.js
+++ b/samples/grids/grid/cell-selection-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/change-icons-custom/package.json b/samples/grids/grid/change-icons-custom/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/change-icons-custom/package.json
+++ b/samples/grids/grid/change-icons-custom/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/change-icons-custom/webpack.config.js b/samples/grids/grid/change-icons-custom/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/change-icons-custom/webpack.config.js
+++ b/samples/grids/grid/change-icons-custom/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/clipboard-operations/package.json b/samples/grids/grid/clipboard-operations/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/clipboard-operations/package.json
+++ b/samples/grids/grid/clipboard-operations/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/clipboard-operations/webpack.config.js b/samples/grids/grid/clipboard-operations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/clipboard-operations/webpack.config.js
+++ b/samples/grids/grid/clipboard-operations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-auto-sizing/package.json b/samples/grids/grid/column-auto-sizing/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-auto-sizing/package.json
+++ b/samples/grids/grid/column-auto-sizing/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-auto-sizing/webpack.config.js b/samples/grids/grid/column-auto-sizing/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-auto-sizing/webpack.config.js
+++ b/samples/grids/grid/column-auto-sizing/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-collapsible-groups/package.json b/samples/grids/grid/column-collapsible-groups/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-collapsible-groups/package.json
+++ b/samples/grids/grid/column-collapsible-groups/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-collapsible-groups/webpack.config.js b/samples/grids/grid/column-collapsible-groups/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-collapsible-groups/webpack.config.js
+++ b/samples/grids/grid/column-collapsible-groups/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-data-types/package.json b/samples/grids/grid/column-data-types/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-data-types/package.json
+++ b/samples/grids/grid/column-data-types/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-data-types/webpack.config.js b/samples/grids/grid/column-data-types/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-data-types/webpack.config.js
+++ b/samples/grids/grid/column-data-types/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-hiding-options/package.json b/samples/grids/grid/column-hiding-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-hiding-options/package.json
+++ b/samples/grids/grid/column-hiding-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-hiding-options/webpack.config.js b/samples/grids/grid/column-hiding-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-hiding-options/webpack.config.js
+++ b/samples/grids/grid/column-hiding-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-hiding-toolbar-style/package.json b/samples/grids/grid/column-hiding-toolbar-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/grid/column-hiding-toolbar-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js b/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js
+++ b/samples/grids/grid/column-hiding-toolbar-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-hiding-toolbar/package.json b/samples/grids/grid/column-hiding-toolbar/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-hiding-toolbar/package.json
+++ b/samples/grids/grid/column-hiding-toolbar/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-hiding-toolbar/webpack.config.js b/samples/grids/grid/column-hiding-toolbar/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-hiding-toolbar/webpack.config.js
+++ b/samples/grids/grid/column-hiding-toolbar/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-moving-options/package.json b/samples/grids/grid/column-moving-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/column-moving-options/package.json
+++ b/samples/grids/grid/column-moving-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-moving-options/webpack.config.js b/samples/grids/grid/column-moving-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-moving-options/webpack.config.js
+++ b/samples/grids/grid/column-moving-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-moving-styles/package.json b/samples/grids/grid/column-moving-styles/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/column-moving-styles/package.json
+++ b/samples/grids/grid/column-moving-styles/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-moving-styles/webpack.config.js b/samples/grids/grid/column-moving-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-moving-styles/webpack.config.js
+++ b/samples/grids/grid/column-moving-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-pinning-options/package.json b/samples/grids/grid/column-pinning-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-pinning-options/package.json
+++ b/samples/grids/grid/column-pinning-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-pinning-options/webpack.config.js b/samples/grids/grid/column-pinning-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-pinning-options/webpack.config.js
+++ b/samples/grids/grid/column-pinning-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-pinning-right-side/package.json b/samples/grids/grid/column-pinning-right-side/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/column-pinning-right-side/package.json
+++ b/samples/grids/grid/column-pinning-right-side/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-pinning-right-side/webpack.config.js b/samples/grids/grid/column-pinning-right-side/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-pinning-right-side/webpack.config.js
+++ b/samples/grids/grid/column-pinning-right-side/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-pinning-styles/package.json b/samples/grids/grid/column-pinning-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-pinning-styles/package.json
+++ b/samples/grids/grid/column-pinning-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-pinning-styles/webpack.config.js b/samples/grids/grid/column-pinning-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-pinning-styles/webpack.config.js
+++ b/samples/grids/grid/column-pinning-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-pinning/package.json b/samples/grids/grid/column-pinning/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-pinning/package.json
+++ b/samples/grids/grid/column-pinning/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-pinning/webpack.config.js b/samples/grids/grid/column-pinning/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-pinning/webpack.config.js
+++ b/samples/grids/grid/column-pinning/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-resize-styling/package.json b/samples/grids/grid/column-resize-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-resize-styling/package.json
+++ b/samples/grids/grid/column-resize-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-resize-styling/webpack.config.js b/samples/grids/grid/column-resize-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-resize-styling/webpack.config.js
+++ b/samples/grids/grid/column-resize-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-resizing/package.json b/samples/grids/grid/column-resizing/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-resizing/package.json
+++ b/samples/grids/grid/column-resizing/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-resizing/webpack.config.js b/samples/grids/grid/column-resizing/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-resizing/webpack.config.js
+++ b/samples/grids/grid/column-resizing/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-selection-group/package.json b/samples/grids/grid/column-selection-group/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-selection-group/package.json
+++ b/samples/grids/grid/column-selection-group/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-selection-group/webpack.config.js b/samples/grids/grid/column-selection-group/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-selection-group/webpack.config.js
+++ b/samples/grids/grid/column-selection-group/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-selection-mode/package.json b/samples/grids/grid/column-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/column-selection-mode/package.json
+++ b/samples/grids/grid/column-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-selection-mode/webpack.config.js b/samples/grids/grid/column-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-selection-mode/webpack.config.js
+++ b/samples/grids/grid/column-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-selection-styles/package.json b/samples/grids/grid/column-selection-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-selection-styles/package.json
+++ b/samples/grids/grid/column-selection-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-selection-styles/webpack.config.js b/samples/grids/grid/column-selection-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-selection-styles/webpack.config.js
+++ b/samples/grids/grid/column-selection-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-sorting-indicators/package.json b/samples/grids/grid/column-sorting-indicators/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-sorting-indicators/package.json
+++ b/samples/grids/grid/column-sorting-indicators/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-sorting-indicators/webpack.config.js b/samples/grids/grid/column-sorting-indicators/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-sorting-indicators/webpack.config.js
+++ b/samples/grids/grid/column-sorting-indicators/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-sorting-options/package.json b/samples/grids/grid/column-sorting-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/column-sorting-options/package.json
+++ b/samples/grids/grid/column-sorting-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-sorting-options/webpack.config.js b/samples/grids/grid/column-sorting-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-sorting-options/webpack.config.js
+++ b/samples/grids/grid/column-sorting-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/column-sorting-style/package.json b/samples/grids/grid/column-sorting-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/column-sorting-style/package.json
+++ b/samples/grids/grid/column-sorting-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/column-sorting-style/webpack.config.js b/samples/grids/grid/column-sorting-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/column-sorting-style/webpack.config.js
+++ b/samples/grids/grid/column-sorting-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/conditional-cell-style-1/package.json b/samples/grids/grid/conditional-cell-style-1/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/conditional-cell-style-1/package.json
+++ b/samples/grids/grid/conditional-cell-style-1/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/conditional-cell-style-1/webpack.config.js b/samples/grids/grid/conditional-cell-style-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/conditional-cell-style-1/webpack.config.js
+++ b/samples/grids/grid/conditional-cell-style-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/conditional-cell-style-2/package.json b/samples/grids/grid/conditional-cell-style-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/conditional-cell-style-2/package.json
+++ b/samples/grids/grid/conditional-cell-style-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/conditional-cell-style-2/webpack.config.js b/samples/grids/grid/conditional-cell-style-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/conditional-cell-style-2/webpack.config.js
+++ b/samples/grids/grid/conditional-cell-style-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/conditional-row-selectors/package.json b/samples/grids/grid/conditional-row-selectors/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/conditional-row-selectors/package.json
+++ b/samples/grids/grid/conditional-row-selectors/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/conditional-row-selectors/webpack.config.js b/samples/grids/grid/conditional-row-selectors/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/conditional-row-selectors/webpack.config.js
+++ b/samples/grids/grid/conditional-row-selectors/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/custom-context-menu/package.json b/samples/grids/grid/custom-context-menu/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/custom-context-menu/package.json
+++ b/samples/grids/grid/custom-context-menu/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/custom-context-menu/webpack.config.js b/samples/grids/grid/custom-context-menu/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/custom-context-menu/webpack.config.js
+++ b/samples/grids/grid/custom-context-menu/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/custom-filtering/package.json b/samples/grids/grid/custom-filtering/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/custom-filtering/package.json
+++ b/samples/grids/grid/custom-filtering/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/custom-filtering/webpack.config.js b/samples/grids/grid/custom-filtering/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/custom-filtering/webpack.config.js
+++ b/samples/grids/grid/custom-filtering/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-batch-editing-actions/package.json b/samples/grids/grid/data-batch-editing-actions/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/data-batch-editing-actions/package.json
+++ b/samples/grids/grid/data-batch-editing-actions/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-batch-editing-actions/webpack.config.js b/samples/grids/grid/data-batch-editing-actions/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-batch-editing-actions/webpack.config.js
+++ b/samples/grids/grid/data-batch-editing-actions/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-exporting-indicator/package.json b/samples/grids/grid/data-exporting-indicator/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/data-exporting-indicator/package.json
+++ b/samples/grids/grid/data-exporting-indicator/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-exporting-indicator/webpack.config.js b/samples/grids/grid/data-exporting-indicator/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/data-exporting-indicator/webpack.config.js
+++ b/samples/grids/grid/data-exporting-indicator/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-paste-options/package.json b/samples/grids/grid/data-paste-options/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/data-paste-options/package.json
+++ b/samples/grids/grid/data-paste-options/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-paste-options/webpack.config.js b/samples/grids/grid/data-paste-options/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/data-paste-options/webpack.config.js
+++ b/samples/grids/grid/data-paste-options/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-performance-virtualization/package.json b/samples/grids/grid/data-performance-virtualization/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/data-performance-virtualization/package.json
+++ b/samples/grids/grid/data-performance-virtualization/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-performance-virtualization/webpack.config.js b/samples/grids/grid/data-performance-virtualization/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-performance-virtualization/webpack.config.js
+++ b/samples/grids/grid/data-performance-virtualization/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-searching/package.json b/samples/grids/grid/data-searching/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/data-searching/package.json
+++ b/samples/grids/grid/data-searching/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-searching/webpack.config.js b/samples/grids/grid/data-searching/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/data-searching/webpack.config.js
+++ b/samples/grids/grid/data-searching/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-summaries-custom/package.json b/samples/grids/grid/data-summaries-custom/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/data-summaries-custom/package.json
+++ b/samples/grids/grid/data-summaries-custom/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-summaries-custom/webpack.config.js b/samples/grids/grid/data-summaries-custom/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/data-summaries-custom/webpack.config.js
+++ b/samples/grids/grid/data-summaries-custom/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-summary-formatter/package.json b/samples/grids/grid/data-summary-formatter/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/data-summary-formatter/package.json
+++ b/samples/grids/grid/data-summary-formatter/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-summary-formatter/webpack.config.js b/samples/grids/grid/data-summary-formatter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-summary-formatter/webpack.config.js
+++ b/samples/grids/grid/data-summary-formatter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-summary-options/package.json b/samples/grids/grid/data-summary-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/data-summary-options/package.json
+++ b/samples/grids/grid/data-summary-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-summary-options/webpack.config.js b/samples/grids/grid/data-summary-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-summary-options/webpack.config.js
+++ b/samples/grids/grid/data-summary-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-summary-template/package.json b/samples/grids/grid/data-summary-template/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/data-summary-template/package.json
+++ b/samples/grids/grid/data-summary-template/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-summary-template/webpack.config.js b/samples/grids/grid/data-summary-template/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-summary-template/webpack.config.js
+++ b/samples/grids/grid/data-summary-template/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-validation-style/package.json b/samples/grids/grid/data-validation-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/data-validation-style/package.json
+++ b/samples/grids/grid/data-validation-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-validation-style/webpack.config.js b/samples/grids/grid/data-validation-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-validation-style/webpack.config.js
+++ b/samples/grids/grid/data-validation-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-validator-service-cross-field/package.json b/samples/grids/grid/data-validator-service-cross-field/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/data-validator-service-cross-field/package.json
+++ b/samples/grids/grid/data-validator-service-cross-field/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-validator-service-cross-field/webpack.config.js b/samples/grids/grid/data-validator-service-cross-field/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-validator-service-cross-field/webpack.config.js
+++ b/samples/grids/grid/data-validator-service-cross-field/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-validator-service-extended/package.json b/samples/grids/grid/data-validator-service-extended/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/data-validator-service-extended/package.json
+++ b/samples/grids/grid/data-validator-service-extended/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-validator-service-extended/webpack.config.js b/samples/grids/grid/data-validator-service-extended/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-validator-service-extended/webpack.config.js
+++ b/samples/grids/grid/data-validator-service-extended/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/data-validator-service/package.json b/samples/grids/grid/data-validator-service/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/data-validator-service/package.json
+++ b/samples/grids/grid/data-validator-service/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/data-validator-service/webpack.config.js b/samples/grids/grid/data-validator-service/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/data-validator-service/webpack.config.js
+++ b/samples/grids/grid/data-validator-service/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/editing-columns/package.json b/samples/grids/grid/editing-columns/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/editing-columns/package.json
+++ b/samples/grids/grid/editing-columns/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/editing-columns/webpack.config.js b/samples/grids/grid/editing-columns/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/editing-columns/webpack.config.js
+++ b/samples/grids/grid/editing-columns/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/editing-events/package.json b/samples/grids/grid/editing-events/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/editing-events/package.json
+++ b/samples/grids/grid/editing-events/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/editing-events/webpack.config.js b/samples/grids/grid/editing-events/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/editing-events/webpack.config.js
+++ b/samples/grids/grid/editing-events/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/editing-excel-style-custom/package.json b/samples/grids/grid/editing-excel-style-custom/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/editing-excel-style-custom/package.json
+++ b/samples/grids/grid/editing-excel-style-custom/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/editing-excel-style-custom/webpack.config.js b/samples/grids/grid/editing-excel-style-custom/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/editing-excel-style-custom/webpack.config.js
+++ b/samples/grids/grid/editing-excel-style-custom/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/editing-excel-style/package.json b/samples/grids/grid/editing-excel-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/editing-excel-style/package.json
+++ b/samples/grids/grid/editing-excel-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/editing-excel-style/webpack.config.js b/samples/grids/grid/editing-excel-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/editing-excel-style/webpack.config.js
+++ b/samples/grids/grid/editing-excel-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/editing-lifecycle/package.json b/samples/grids/grid/editing-lifecycle/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/editing-lifecycle/package.json
+++ b/samples/grids/grid/editing-lifecycle/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/editing-lifecycle/webpack.config.js b/samples/grids/grid/editing-lifecycle/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/editing-lifecycle/webpack.config.js
+++ b/samples/grids/grid/editing-lifecycle/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/excel-exporting/package.json b/samples/grids/grid/excel-exporting/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/excel-exporting/package.json
+++ b/samples/grids/grid/excel-exporting/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/excel-exporting/webpack.config.js b/samples/grids/grid/excel-exporting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/excel-exporting/webpack.config.js
+++ b/samples/grids/grid/excel-exporting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/package.json b/samples/grids/grid/excel-style-filtering-sample-1/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/package.json
+++ b/samples/grids/grid/excel-style-filtering-sample-1/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js b/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-sample-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/package.json b/samples/grids/grid/excel-style-filtering-sample-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/package.json
+++ b/samples/grids/grid/excel-style-filtering-sample-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js b/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-sample-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/package.json b/samples/grids/grid/excel-style-filtering-sample-3/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/package.json
+++ b/samples/grids/grid/excel-style-filtering-sample-3/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js b/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-sample-3/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/excel-style-filtering-style/package.json b/samples/grids/grid/excel-style-filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/excel-style-filtering-style/package.json
+++ b/samples/grids/grid/excel-style-filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/excel-style-filtering-style/webpack.config.js b/samples/grids/grid/excel-style-filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/excel-style-filtering-style/webpack.config.js
+++ b/samples/grids/grid/excel-style-filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/external-advanced-filtering/package.json b/samples/grids/grid/external-advanced-filtering/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/external-advanced-filtering/package.json
+++ b/samples/grids/grid/external-advanced-filtering/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/external-advanced-filtering/webpack.config.js b/samples/grids/grid/external-advanced-filtering/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/external-advanced-filtering/webpack.config.js
+++ b/samples/grids/grid/external-advanced-filtering/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/filtering-options/package.json b/samples/grids/grid/filtering-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/filtering-options/package.json
+++ b/samples/grids/grid/filtering-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/filtering-options/webpack.config.js b/samples/grids/grid/filtering-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/filtering-options/webpack.config.js
+++ b/samples/grids/grid/filtering-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/filtering-strategy/package.json b/samples/grids/grid/filtering-strategy/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/filtering-strategy/package.json
+++ b/samples/grids/grid/filtering-strategy/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/filtering-strategy/webpack.config.js b/samples/grids/grid/filtering-strategy/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/filtering-strategy/webpack.config.js
+++ b/samples/grids/grid/filtering-strategy/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/filtering-style/package.json b/samples/grids/grid/filtering-style/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/filtering-style/package.json
+++ b/samples/grids/grid/filtering-style/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/filtering-style/webpack.config.js b/samples/grids/grid/filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/filtering-style/webpack.config.js
+++ b/samples/grids/grid/filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/finjs/package.json b/samples/grids/grid/finjs/package.json
index 2f11499b49..a416730c1c 100644
--- a/samples/grids/grid/finjs/package.json
+++ b/samples/grids/grid/finjs/package.json
@@ -26,18 +26,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/finjs/webpack.config.js b/samples/grids/grid/finjs/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/finjs/webpack.config.js
+++ b/samples/grids/grid/finjs/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/groupby-custom/package.json b/samples/grids/grid/groupby-custom/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/groupby-custom/package.json
+++ b/samples/grids/grid/groupby-custom/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/groupby-custom/webpack.config.js b/samples/grids/grid/groupby-custom/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/groupby-custom/webpack.config.js
+++ b/samples/grids/grid/groupby-custom/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/groupby-expressions/package.json b/samples/grids/grid/groupby-expressions/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/groupby-expressions/package.json
+++ b/samples/grids/grid/groupby-expressions/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/groupby-expressions/webpack.config.js b/samples/grids/grid/groupby-expressions/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/groupby-expressions/webpack.config.js
+++ b/samples/grids/grid/groupby-expressions/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/groupby-paging/package.json b/samples/grids/grid/groupby-paging/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/groupby-paging/package.json
+++ b/samples/grids/grid/groupby-paging/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/groupby-paging/webpack.config.js b/samples/grids/grid/groupby-paging/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/groupby-paging/webpack.config.js
+++ b/samples/grids/grid/groupby-paging/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/groupby-styling/package.json b/samples/grids/grid/groupby-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/groupby-styling/package.json
+++ b/samples/grids/grid/groupby-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/groupby-styling/webpack.config.js b/samples/grids/grid/groupby-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/groupby-styling/webpack.config.js
+++ b/samples/grids/grid/groupby-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/groupby-summary-options/package.json b/samples/grids/grid/groupby-summary-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/groupby-summary-options/package.json
+++ b/samples/grids/grid/groupby-summary-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/groupby-summary-options/webpack.config.js b/samples/grids/grid/groupby-summary-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/groupby-summary-options/webpack.config.js
+++ b/samples/grids/grid/groupby-summary-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/groupby-summary-styling/package.json b/samples/grids/grid/groupby-summary-styling/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/groupby-summary-styling/package.json
+++ b/samples/grids/grid/groupby-summary-styling/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/groupby-summary-styling/webpack.config.js b/samples/grids/grid/groupby-summary-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/groupby-summary-styling/webpack.config.js
+++ b/samples/grids/grid/groupby-summary-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/infinite-scroll/package.json b/samples/grids/grid/infinite-scroll/package.json
index c2be155ce8..f381e483e3 100644
--- a/samples/grids/grid/infinite-scroll/package.json
+++ b/samples/grids/grid/infinite-scroll/package.json
@@ -26,10 +26,10 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "rxjs": "7.8.1",
     "tslib": "^2.0.0"
@@ -37,7 +37,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/infinite-scroll/webpack.config.js b/samples/grids/grid/infinite-scroll/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/infinite-scroll/webpack.config.js
+++ b/samples/grids/grid/infinite-scroll/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/keyboard-custom-navigation/package.json b/samples/grids/grid/keyboard-custom-navigation/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/keyboard-custom-navigation/package.json
+++ b/samples/grids/grid/keyboard-custom-navigation/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/keyboard-custom-navigation/webpack.config.js b/samples/grids/grid/keyboard-custom-navigation/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/keyboard-custom-navigation/webpack.config.js
+++ b/samples/grids/grid/keyboard-custom-navigation/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/keyboard-mrl-navigation/package.json b/samples/grids/grid/keyboard-mrl-navigation/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/package.json
+++ b/samples/grids/grid/keyboard-mrl-navigation/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js b/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js
+++ b/samples/grids/grid/keyboard-mrl-navigation/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/keyboard-navigation-guide/package.json b/samples/grids/grid/keyboard-navigation-guide/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/keyboard-navigation-guide/package.json
+++ b/samples/grids/grid/keyboard-navigation-guide/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/keyboard-navigation-guide/webpack.config.js b/samples/grids/grid/keyboard-navigation-guide/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/keyboard-navigation-guide/webpack.config.js
+++ b/samples/grids/grid/keyboard-navigation-guide/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/layout-display-density/package.json b/samples/grids/grid/layout-display-density/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/layout-display-density/package.json
+++ b/samples/grids/grid/layout-display-density/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/layout-display-density/webpack.config.js b/samples/grids/grid/layout-display-density/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/layout-display-density/webpack.config.js
+++ b/samples/grids/grid/layout-display-density/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/master-detail/package.json b/samples/grids/grid/master-detail/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/master-detail/package.json
+++ b/samples/grids/grid/master-detail/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/master-detail/webpack.config.js b/samples/grids/grid/master-detail/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/master-detail/webpack.config.js
+++ b/samples/grids/grid/master-detail/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-cell-selection-mode/package.json b/samples/grids/grid/multi-cell-selection-mode/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/multi-cell-selection-mode/package.json
+++ b/samples/grids/grid/multi-cell-selection-mode/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-cell-selection-mode/webpack.config.js b/samples/grids/grid/multi-cell-selection-mode/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/multi-cell-selection-mode/webpack.config.js
+++ b/samples/grids/grid/multi-cell-selection-mode/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-column-headers-export/package.json b/samples/grids/grid/multi-column-headers-export/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/multi-column-headers-export/package.json
+++ b/samples/grids/grid/multi-column-headers-export/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-column-headers-export/webpack.config.js b/samples/grids/grid/multi-column-headers-export/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/multi-column-headers-export/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-export/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-column-headers-overview/package.json b/samples/grids/grid/multi-column-headers-overview/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/multi-column-headers-overview/package.json
+++ b/samples/grids/grid/multi-column-headers-overview/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-column-headers-overview/webpack.config.js b/samples/grids/grid/multi-column-headers-overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/multi-column-headers-overview/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-column-headers-styling/package.json b/samples/grids/grid/multi-column-headers-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/multi-column-headers-styling/package.json
+++ b/samples/grids/grid/multi-column-headers-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-column-headers-styling/webpack.config.js b/samples/grids/grid/multi-column-headers-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/multi-column-headers-styling/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-column-headers-template/package.json b/samples/grids/grid/multi-column-headers-template/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/multi-column-headers-template/package.json
+++ b/samples/grids/grid/multi-column-headers-template/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-column-headers-template/webpack.config.js b/samples/grids/grid/multi-column-headers-template/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/multi-column-headers-template/webpack.config.js
+++ b/samples/grids/grid/multi-column-headers-template/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-row-layout-options/package.json b/samples/grids/grid/multi-row-layout-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/multi-row-layout-options/package.json
+++ b/samples/grids/grid/multi-row-layout-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-row-layout-options/webpack.config.js b/samples/grids/grid/multi-row-layout-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/multi-row-layout-options/webpack.config.js
+++ b/samples/grids/grid/multi-row-layout-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/multi-row-layout-style/package.json b/samples/grids/grid/multi-row-layout-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/multi-row-layout-style/package.json
+++ b/samples/grids/grid/multi-row-layout-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/multi-row-layout-style/webpack.config.js b/samples/grids/grid/multi-row-layout-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/multi-row-layout-style/webpack.config.js
+++ b/samples/grids/grid/multi-row-layout-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/overview/package.json b/samples/grids/grid/overview/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/overview/package.json
+++ b/samples/grids/grid/overview/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/overview/webpack.config.js b/samples/grids/grid/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/overview/webpack.config.js
+++ b/samples/grids/grid/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/paste/package.json b/samples/grids/grid/paste/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/paste/package.json
+++ b/samples/grids/grid/paste/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/paste/webpack.config.js b/samples/grids/grid/paste/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/paste/webpack.config.js
+++ b/samples/grids/grid/paste/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/remote-paging-data/package.json b/samples/grids/grid/remote-paging-data/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/remote-paging-data/package.json
+++ b/samples/grids/grid/remote-paging-data/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/remote-paging-data/webpack.config.js b/samples/grids/grid/remote-paging-data/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/remote-paging-data/webpack.config.js
+++ b/samples/grids/grid/remote-paging-data/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/remote-paging-grid/package.json b/samples/grids/grid/remote-paging-grid/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/remote-paging-grid/package.json
+++ b/samples/grids/grid/remote-paging-grid/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/remote-paging-grid/webpack.config.js b/samples/grids/grid/remote-paging-grid/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/remote-paging-grid/webpack.config.js
+++ b/samples/grids/grid/remote-paging-grid/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-adding/package.json b/samples/grids/grid/row-adding/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-adding/package.json
+++ b/samples/grids/grid/row-adding/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-adding/webpack.config.js b/samples/grids/grid/row-adding/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-adding/webpack.config.js
+++ b/samples/grids/grid/row-adding/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-classes/package.json b/samples/grids/grid/row-classes/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-classes/package.json
+++ b/samples/grids/grid/row-classes/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-classes/webpack.config.js b/samples/grids/grid/row-classes/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-classes/webpack.config.js
+++ b/samples/grids/grid/row-classes/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-drag-base/package.json b/samples/grids/grid/row-drag-base/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/row-drag-base/package.json
+++ b/samples/grids/grid/row-drag-base/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-drag-base/webpack.config.js b/samples/grids/grid/row-drag-base/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/row-drag-base/webpack.config.js
+++ b/samples/grids/grid/row-drag-base/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-editing-options/package.json b/samples/grids/grid/row-editing-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-editing-options/package.json
+++ b/samples/grids/grid/row-editing-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-editing-options/webpack.config.js b/samples/grids/grid/row-editing-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-editing-options/webpack.config.js
+++ b/samples/grids/grid/row-editing-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-editing-style/package.json b/samples/grids/grid/row-editing-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-editing-style/package.json
+++ b/samples/grids/grid/row-editing-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-editing-style/webpack.config.js b/samples/grids/grid/row-editing-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-editing-style/webpack.config.js
+++ b/samples/grids/grid/row-editing-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-paging-basic/package.json b/samples/grids/grid/row-paging-basic/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/row-paging-basic/package.json
+++ b/samples/grids/grid/row-paging-basic/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-paging-basic/webpack.config.js b/samples/grids/grid/row-paging-basic/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-paging-basic/webpack.config.js
+++ b/samples/grids/grid/row-paging-basic/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-paging-options/package.json b/samples/grids/grid/row-paging-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/row-paging-options/package.json
+++ b/samples/grids/grid/row-paging-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-paging-options/webpack.config.js b/samples/grids/grid/row-paging-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-paging-options/webpack.config.js
+++ b/samples/grids/grid/row-paging-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-pinning-drag/package.json b/samples/grids/grid/row-pinning-drag/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-pinning-drag/package.json
+++ b/samples/grids/grid/row-pinning-drag/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-pinning-drag/webpack.config.js b/samples/grids/grid/row-pinning-drag/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-pinning-drag/webpack.config.js
+++ b/samples/grids/grid/row-pinning-drag/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-pinning-extra-column/package.json b/samples/grids/grid/row-pinning-extra-column/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-pinning-extra-column/package.json
+++ b/samples/grids/grid/row-pinning-extra-column/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-pinning-extra-column/webpack.config.js b/samples/grids/grid/row-pinning-extra-column/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-pinning-extra-column/webpack.config.js
+++ b/samples/grids/grid/row-pinning-extra-column/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-pinning-options/package.json b/samples/grids/grid/row-pinning-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/row-pinning-options/package.json
+++ b/samples/grids/grid/row-pinning-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-pinning-options/webpack.config.js b/samples/grids/grid/row-pinning-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-pinning-options/webpack.config.js
+++ b/samples/grids/grid/row-pinning-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-pinning-style/package.json b/samples/grids/grid/row-pinning-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-pinning-style/package.json
+++ b/samples/grids/grid/row-pinning-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-pinning-style/webpack.config.js b/samples/grids/grid/row-pinning-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-pinning-style/webpack.config.js
+++ b/samples/grids/grid/row-pinning-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-reorder/package.json b/samples/grids/grid/row-reorder/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-reorder/package.json
+++ b/samples/grids/grid/row-reorder/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-reorder/webpack.config.js b/samples/grids/grid/row-reorder/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-reorder/webpack.config.js
+++ b/samples/grids/grid/row-reorder/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-selection-mode/package.json b/samples/grids/grid/row-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/row-selection-mode/package.json
+++ b/samples/grids/grid/row-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-selection-mode/webpack.config.js b/samples/grids/grid/row-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-selection-mode/webpack.config.js
+++ b/samples/grids/grid/row-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-selection-template-excel/package.json b/samples/grids/grid/row-selection-template-excel/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/row-selection-template-excel/package.json
+++ b/samples/grids/grid/row-selection-template-excel/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-selection-template-excel/webpack.config.js b/samples/grids/grid/row-selection-template-excel/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-selection-template-excel/webpack.config.js
+++ b/samples/grids/grid/row-selection-template-excel/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-selection-template-numbers/package.json b/samples/grids/grid/row-selection-template-numbers/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/row-selection-template-numbers/package.json
+++ b/samples/grids/grid/row-selection-template-numbers/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-selection-template-numbers/webpack.config.js b/samples/grids/grid/row-selection-template-numbers/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-selection-template-numbers/webpack.config.js
+++ b/samples/grids/grid/row-selection-template-numbers/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/row-styles/package.json b/samples/grids/grid/row-styles/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/grid/row-styles/package.json
+++ b/samples/grids/grid/row-styles/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/row-styles/webpack.config.js b/samples/grids/grid/row-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/row-styles/webpack.config.js
+++ b/samples/grids/grid/row-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/state-persistence-about/package.json b/samples/grids/grid/state-persistence-about/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/state-persistence-about/package.json
+++ b/samples/grids/grid/state-persistence-about/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/state-persistence-about/webpack.config.js b/samples/grids/grid/state-persistence-about/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/grid/state-persistence-about/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/state-persistence-main/package.json b/samples/grids/grid/state-persistence-main/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/grid/state-persistence-main/package.json
+++ b/samples/grids/grid/state-persistence-main/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/state-persistence-main/webpack.config.js b/samples/grids/grid/state-persistence-main/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/grid/state-persistence-main/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/styling-custom-CSS/package.json b/samples/grids/grid/styling-custom-CSS/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/styling-custom-CSS/package.json
+++ b/samples/grids/grid/styling-custom-CSS/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/styling-custom-CSS/webpack.config.js b/samples/grids/grid/styling-custom-CSS/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/styling-custom-CSS/webpack.config.js
+++ b/samples/grids/grid/styling-custom-CSS/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/toolbar-sample-1/package.json b/samples/grids/grid/toolbar-sample-1/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/toolbar-sample-1/package.json
+++ b/samples/grids/grid/toolbar-sample-1/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/toolbar-sample-1/webpack.config.js b/samples/grids/grid/toolbar-sample-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/toolbar-sample-1/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/toolbar-sample-2/package.json b/samples/grids/grid/toolbar-sample-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/toolbar-sample-2/package.json
+++ b/samples/grids/grid/toolbar-sample-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/toolbar-sample-2/webpack.config.js b/samples/grids/grid/toolbar-sample-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/toolbar-sample-2/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/toolbar-sample-3/package.json b/samples/grids/grid/toolbar-sample-3/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/toolbar-sample-3/package.json
+++ b/samples/grids/grid/toolbar-sample-3/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/toolbar-sample-3/webpack.config.js b/samples/grids/grid/toolbar-sample-3/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/toolbar-sample-3/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-3/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/toolbar-sample-4/package.json b/samples/grids/grid/toolbar-sample-4/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/grid/toolbar-sample-4/package.json
+++ b/samples/grids/grid/toolbar-sample-4/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/toolbar-sample-4/webpack.config.js b/samples/grids/grid/toolbar-sample-4/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/grid/toolbar-sample-4/webpack.config.js
+++ b/samples/grids/grid/toolbar-sample-4/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/grid/toolbar-style/package.json b/samples/grids/grid/toolbar-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/grid/toolbar-style/package.json
+++ b/samples/grids/grid/toolbar-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/grid/toolbar-style/webpack.config.js b/samples/grids/grid/toolbar-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/grid/toolbar-style/webpack.config.js
+++ b/samples/grids/grid/toolbar-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/action-strip/package.json b/samples/grids/hierarchical-grid/action-strip/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/action-strip/package.json
+++ b/samples/grids/hierarchical-grid/action-strip/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/action-strip/webpack.config.js b/samples/grids/hierarchical-grid/action-strip/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/action-strip/webpack.config.js
+++ b/samples/grids/hierarchical-grid/action-strip/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/package.json b/samples/grids/hierarchical-grid/advanced-filtering-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/package.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js b/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/advanced-filtering-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/package.json b/samples/grids/hierarchical-grid/advanced-filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/package.json
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js b/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/advanced-filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/package.json b/samples/grids/hierarchical-grid/cell-editing-sample/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/package.json
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js b/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-editing-sample/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/package.json b/samples/grids/hierarchical-grid/cell-editing-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/package.json
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js b/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-editing-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/package.json b/samples/grids/hierarchical-grid/cell-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/package.json b/samples/grids/hierarchical-grid/cell-selection-overview/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/package.json b/samples/grids/hierarchical-grid/cell-selection-style/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-style/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/package.json b/samples/grids/hierarchical-grid/cell-selection-styling/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/package.json
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/cell-selection-styling/webpack.config.js b/samples/grids/hierarchical-grid/cell-selection-styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/cell-selection-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/cell-selection-styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/package.json b/samples/grids/hierarchical-grid/column-auto-sizing/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/package.json
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/webpack.config.js b/samples/grids/hierarchical-grid/column-auto-sizing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/column-auto-sizing/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-auto-sizing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/package.json b/samples/grids/hierarchical-grid/column-collapsible-groups/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/package.json
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js b/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-collapsible-groups/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json b/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js b/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-moving-options/package.json b/samples/grids/hierarchical-grid/column-moving-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/package.json
+++ b/samples/grids/hierarchical-grid/column-moving-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js b/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-moving-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/package.json b/samples/grids/hierarchical-grid/column-moving-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/package.json
+++ b/samples/grids/hierarchical-grid/column-moving-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js b/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-moving-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/package.json b/samples/grids/hierarchical-grid/column-pinning-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/package.json b/samples/grids/hierarchical-grid/column-pinning-right-side/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning-right-side/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/package.json b/samples/grids/hierarchical-grid/column-pinning-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-pinning/package.json b/samples/grids/hierarchical-grid/column-pinning/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-pinning/package.json
+++ b/samples/grids/hierarchical-grid/column-pinning/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-pinning/webpack.config.js b/samples/grids/hierarchical-grid/column-pinning/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-pinning/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-pinning/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/package.json b/samples/grids/hierarchical-grid/column-resize-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/package.json
+++ b/samples/grids/hierarchical-grid/column-resize-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js b/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-resize-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-resizing/package.json b/samples/grids/hierarchical-grid/column-resizing/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-resizing/package.json
+++ b/samples/grids/hierarchical-grid/column-resizing/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-resizing/webpack.config.js b/samples/grids/hierarchical-grid/column-resizing/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-resizing/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-resizing/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-selection-group/package.json b/samples/grids/hierarchical-grid/column-selection-group/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/package.json
+++ b/samples/grids/hierarchical-grid/column-selection-group/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js b/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-selection-group/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/package.json b/samples/grids/hierarchical-grid/column-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/package.json
+++ b/samples/grids/hierarchical-grid/column-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js b/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/package.json b/samples/grids/hierarchical-grid/column-selection-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/package.json
+++ b/samples/grids/hierarchical-grid/column-selection-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js b/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-selection-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/package.json b/samples/grids/hierarchical-grid/column-sorting-indicators/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/package.json
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js b/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-sorting-indicators/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/package.json b/samples/grids/hierarchical-grid/column-sorting-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/package.json
+++ b/samples/grids/hierarchical-grid/column-sorting-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js b/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-sorting-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/package.json b/samples/grids/hierarchical-grid/column-sorting-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/package.json
+++ b/samples/grids/hierarchical-grid/column-sorting-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js b/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/column-sorting-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json b/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js b/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json b/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js b/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js
+++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/package.json b/samples/grids/hierarchical-grid/conditional-row-selectors/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/package.json
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js b/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js
+++ b/samples/grids/hierarchical-grid/conditional-row-selectors/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/custom-filtering/package.json b/samples/grids/hierarchical-grid/custom-filtering/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/package.json
+++ b/samples/grids/hierarchical-grid/custom-filtering/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js b/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js
+++ b/samples/grids/hierarchical-grid/custom-filtering/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/package.json b/samples/grids/hierarchical-grid/data-exporting-indicator/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/hierarchical-grid/data-exporting-indicator/package.json
+++ b/samples/grids/hierarchical-grid/data-exporting-indicator/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/webpack.config.js b/samples/grids/hierarchical-grid/data-exporting-indicator/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/data-exporting-indicator/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-exporting-indicator/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/package.json b/samples/grids/hierarchical-grid/data-performance-virtualization/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/hierarchical-grid/data-performance-virtualization/package.json
+++ b/samples/grids/hierarchical-grid/data-performance-virtualization/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/webpack.config.js b/samples/grids/hierarchical-grid/data-performance-virtualization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/data-performance-virtualization/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-performance-virtualization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/package.json b/samples/grids/hierarchical-grid/data-summary-formatter/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-formatter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/package.json b/samples/grids/hierarchical-grid/data-summary-options-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-options-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/data-summary-options/package.json b/samples/grids/hierarchical-grid/data-summary-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/data-summary-template/package.json b/samples/grids/hierarchical-grid/data-summary-template/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/package.json
+++ b/samples/grids/hierarchical-grid/data-summary-template/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js b/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js
+++ b/samples/grids/hierarchical-grid/data-summary-template/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/editing-columns/package.json b/samples/grids/hierarchical-grid/editing-columns/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/editing-columns/package.json
+++ b/samples/grids/hierarchical-grid/editing-columns/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/editing-columns/webpack.config.js b/samples/grids/hierarchical-grid/editing-columns/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/editing-columns/webpack.config.js
+++ b/samples/grids/hierarchical-grid/editing-columns/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/editing-events/package.json b/samples/grids/hierarchical-grid/editing-events/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/editing-events/package.json
+++ b/samples/grids/hierarchical-grid/editing-events/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/editing-events/webpack.config.js b/samples/grids/hierarchical-grid/editing-events/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/editing-events/webpack.config.js
+++ b/samples/grids/hierarchical-grid/editing-events/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/package.json b/samples/grids/hierarchical-grid/editing-lifecycle/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/package.json
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js b/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js
+++ b/samples/grids/hierarchical-grid/editing-lifecycle/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/excel-exporting/package.json b/samples/grids/hierarchical-grid/excel-exporting/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/package.json
+++ b/samples/grids/hierarchical-grid/excel-exporting/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js b/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-exporting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js b/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/filtering-options/package.json b/samples/grids/hierarchical-grid/filtering-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/filtering-options/package.json
+++ b/samples/grids/hierarchical-grid/filtering-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/filtering-options/webpack.config.js b/samples/grids/hierarchical-grid/filtering-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/filtering-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/filtering-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/filtering-style/package.json b/samples/grids/hierarchical-grid/filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/filtering-style/package.json
+++ b/samples/grids/hierarchical-grid/filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/filtering-style/webpack.config.js b/samples/grids/hierarchical-grid/filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/filtering-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js b/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js b/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/layout-display-density/package.json b/samples/grids/hierarchical-grid/layout-display-density/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/package.json
+++ b/samples/grids/hierarchical-grid/layout-display-density/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js b/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js
+++ b/samples/grids/hierarchical-grid/layout-display-density/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/package.json b/samples/grids/hierarchical-grid/multi-column-headers-export/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-export/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json b/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json b/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/package.json b/samples/grids/hierarchical-grid/multi-column-headers-template/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/package.json
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js b/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js
+++ b/samples/grids/hierarchical-grid/multi-column-headers-template/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/overview/package.json b/samples/grids/hierarchical-grid/overview/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/overview/package.json
+++ b/samples/grids/hierarchical-grid/overview/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/overview/webpack.config.js b/samples/grids/hierarchical-grid/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/overview/webpack.config.js
+++ b/samples/grids/hierarchical-grid/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/package.json b/samples/grids/hierarchical-grid/remote-paging-sample/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/hierarchical-grid/remote-paging-sample/package.json
+++ b/samples/grids/hierarchical-grid/remote-paging-sample/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/webpack.config.js b/samples/grids/hierarchical-grid/remote-paging-sample/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/remote-paging-sample/webpack.config.js
+++ b/samples/grids/hierarchical-grid/remote-paging-sample/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-adding/package.json b/samples/grids/hierarchical-grid/row-adding/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-adding/package.json
+++ b/samples/grids/hierarchical-grid/row-adding/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-adding/webpack.config.js b/samples/grids/hierarchical-grid/row-adding/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-adding/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-adding/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-classes/package.json b/samples/grids/hierarchical-grid/row-classes/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-classes/package.json
+++ b/samples/grids/hierarchical-grid/row-classes/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-classes/webpack.config.js b/samples/grids/hierarchical-grid/row-classes/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-classes/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-classes/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-drag-base/package.json b/samples/grids/hierarchical-grid/row-drag-base/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/package.json
+++ b/samples/grids/hierarchical-grid/row-drag-base/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-drag-base/webpack.config.js b/samples/grids/hierarchical-grid/row-drag-base/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-drag-base/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-editing-options/package.json b/samples/grids/hierarchical-grid/row-editing-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/package.json
+++ b/samples/grids/hierarchical-grid/row-editing-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js b/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-editing-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-editing-style/package.json b/samples/grids/hierarchical-grid/row-editing-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/package.json
+++ b/samples/grids/hierarchical-grid/row-editing-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js b/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-editing-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json b/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js b/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/package.json b/samples/grids/hierarchical-grid/row-pinning-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/package.json
+++ b/samples/grids/hierarchical-grid/row-pinning-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js b/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-pinning-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/package.json b/samples/grids/hierarchical-grid/row-pinning-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/package.json
+++ b/samples/grids/hierarchical-grid/row-pinning-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js b/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-pinning-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-reorder/package.json b/samples/grids/hierarchical-grid/row-reorder/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-reorder/package.json
+++ b/samples/grids/hierarchical-grid/row-reorder/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-reorder/webpack.config.js b/samples/grids/hierarchical-grid/row-reorder/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-reorder/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-reorder/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/package.json b/samples/grids/hierarchical-grid/row-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/package.json
+++ b/samples/grids/hierarchical-grid/row-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js b/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json b/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js b/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/row-styles/package.json b/samples/grids/hierarchical-grid/row-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/row-styles/package.json
+++ b/samples/grids/hierarchical-grid/row-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/row-styles/webpack.config.js b/samples/grids/hierarchical-grid/row-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/row-styles/webpack.config.js
+++ b/samples/grids/hierarchical-grid/row-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/state-persistence-about/package.json b/samples/grids/hierarchical-grid/state-persistence-about/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/hierarchical-grid/state-persistence-about/package.json
+++ b/samples/grids/hierarchical-grid/state-persistence-about/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js b/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/hierarchical-grid/state-persistence-about/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/package.json b/samples/grids/hierarchical-grid/state-persistence-main/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/package.json
+++ b/samples/grids/hierarchical-grid/state-persistence-main/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js b/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/hierarchical-grid/state-persistence-main/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/package.json b/samples/grids/hierarchical-grid/toolbar-sample-1/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/package.json b/samples/grids/hierarchical-grid/toolbar-sample-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/package.json b/samples/grids/hierarchical-grid/toolbar-sample-3/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-3/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/package.json b/samples/grids/hierarchical-grid/toolbar-sample-4/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-4/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-sample-4/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-sample-4/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/hierarchical-grid/toolbar-sample-4/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-sample-4/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/hierarchical-grid/toolbar-style/package.json b/samples/grids/hierarchical-grid/toolbar-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/package.json
+++ b/samples/grids/hierarchical-grid/toolbar-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js b/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js
+++ b/samples/grids/hierarchical-grid/toolbar-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/list/add-list-items/package.json b/samples/grids/list/add-list-items/package.json
index 834b13342a..00539d5074 100644
--- a/samples/grids/list/add-list-items/package.json
+++ b/samples/grids/list/add-list-items/package.json
@@ -24,7 +24,7 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit": "^3.2.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
@@ -32,7 +32,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/list/add-list-items/webpack.config.js b/samples/grids/list/add-list-items/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/list/add-list-items/webpack.config.js
+++ b/samples/grids/list/add-list-items/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/list/list-item-content/package.json b/samples/grids/list/list-item-content/package.json
index fd07fed2b1..37cb0e4282 100644
--- a/samples/grids/list/list-item-content/package.json
+++ b/samples/grids/list/list-item-content/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/list/list-item-content/webpack.config.js b/samples/grids/list/list-item-content/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/list/list-item-content/webpack.config.js
+++ b/samples/grids/list/list-item-content/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/list/overview/package.json b/samples/grids/list/overview/package.json
index d76b51d4e3..466edace64 100644
--- a/samples/grids/list/overview/package.json
+++ b/samples/grids/list/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/list/overview/webpack.config.js b/samples/grids/list/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/list/overview/webpack.config.js
+++ b/samples/grids/list/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/list/styling/package.json b/samples/grids/list/styling/package.json
index 9e26367b5f..c30ad15888 100644
--- a/samples/grids/list/styling/package.json
+++ b/samples/grids/list/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/list/styling/webpack.config.js b/samples/grids/list/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/list/styling/webpack.config.js
+++ b/samples/grids/list/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/package.json b/samples/grids/pivot-grid/aggregate-max-sales/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/package.json
+++ b/samples/grids/pivot-grid/aggregate-max-sales/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js b/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js
+++ b/samples/grids/pivot-grid/aggregate-max-sales/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/package.json b/samples/grids/pivot-grid/aggregate-units-sold/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/package.json
+++ b/samples/grids/pivot-grid/aggregate-units-sold/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js b/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js
+++ b/samples/grids/pivot-grid/aggregate-units-sold/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/basic/package.json b/samples/grids/pivot-grid/basic/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/pivot-grid/basic/package.json
+++ b/samples/grids/pivot-grid/basic/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/basic/webpack.config.js b/samples/grids/pivot-grid/basic/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/pivot-grid/basic/webpack.config.js
+++ b/samples/grids/pivot-grid/basic/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/data-persistence-noop/package.json b/samples/grids/pivot-grid/data-persistence-noop/package.json
index 9a7373f3e9..4e28279b1a 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/package.json
+++ b/samples/grids/pivot-grid/data-persistence-noop/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js b/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js
+++ b/samples/grids/pivot-grid/data-persistence-noop/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/data-selector/package.json b/samples/grids/pivot-grid/data-selector/package.json
index eb76ad7c02..21eb5d7435 100644
--- a/samples/grids/pivot-grid/data-selector/package.json
+++ b/samples/grids/pivot-grid/data-selector/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/data-selector/webpack.config.js b/samples/grids/pivot-grid/data-selector/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/pivot-grid/data-selector/webpack.config.js
+++ b/samples/grids/pivot-grid/data-selector/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/features/package.json b/samples/grids/pivot-grid/features/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/pivot-grid/features/package.json
+++ b/samples/grids/pivot-grid/features/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/features/webpack.config.js b/samples/grids/pivot-grid/features/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/pivot-grid/features/webpack.config.js
+++ b/samples/grids/pivot-grid/features/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/remote/package.json b/samples/grids/pivot-grid/remote/package.json
index eb76ad7c02..21eb5d7435 100644
--- a/samples/grids/pivot-grid/remote/package.json
+++ b/samples/grids/pivot-grid/remote/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/remote/webpack.config.js b/samples/grids/pivot-grid/remote/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/pivot-grid/remote/webpack.config.js
+++ b/samples/grids/pivot-grid/remote/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/state-persistence-about/package.json b/samples/grids/pivot-grid/state-persistence-about/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/pivot-grid/state-persistence-about/package.json
+++ b/samples/grids/pivot-grid/state-persistence-about/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/state-persistence-about/webpack.config.js b/samples/grids/pivot-grid/state-persistence-about/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/pivot-grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/pivot-grid/state-persistence-about/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/pivot-grid/state-persistence-main/package.json b/samples/grids/pivot-grid/state-persistence-main/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/pivot-grid/state-persistence-main/package.json
+++ b/samples/grids/pivot-grid/state-persistence-main/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/pivot-grid/state-persistence-main/webpack.config.js b/samples/grids/pivot-grid/state-persistence-main/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/pivot-grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/pivot-grid/state-persistence-main/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/action-strip/package.json b/samples/grids/tree-grid/action-strip/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/action-strip/package.json
+++ b/samples/grids/tree-grid/action-strip/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/action-strip/webpack.config.js b/samples/grids/tree-grid/action-strip/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/action-strip/webpack.config.js
+++ b/samples/grids/tree-grid/action-strip/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/advanced-filtering-options/package.json b/samples/grids/tree-grid/advanced-filtering-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/package.json
+++ b/samples/grids/tree-grid/advanced-filtering-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js b/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js
+++ b/samples/grids/tree-grid/advanced-filtering-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/advanced-filtering-style/package.json b/samples/grids/tree-grid/advanced-filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/package.json
+++ b/samples/grids/tree-grid/advanced-filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js b/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js
+++ b/samples/grids/tree-grid/advanced-filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/cell-editing-sample/package.json b/samples/grids/tree-grid/cell-editing-sample/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/cell-editing-sample/package.json
+++ b/samples/grids/tree-grid/cell-editing-sample/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/cell-editing-sample/webpack.config.js b/samples/grids/tree-grid/cell-editing-sample/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/cell-editing-sample/webpack.config.js
+++ b/samples/grids/tree-grid/cell-editing-sample/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/cell-editing-styling/package.json b/samples/grids/tree-grid/cell-editing-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/cell-editing-styling/package.json
+++ b/samples/grids/tree-grid/cell-editing-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/cell-editing-styling/webpack.config.js b/samples/grids/tree-grid/cell-editing-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/cell-editing-styling/webpack.config.js
+++ b/samples/grids/tree-grid/cell-editing-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/cell-selection-mode/package.json b/samples/grids/tree-grid/cell-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/cell-selection-mode/package.json
+++ b/samples/grids/tree-grid/cell-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/cell-selection-mode/webpack.config.js b/samples/grids/tree-grid/cell-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/cell-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/cell-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/cell-selection-style/package.json b/samples/grids/tree-grid/cell-selection-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/cell-selection-style/package.json
+++ b/samples/grids/tree-grid/cell-selection-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/cell-selection-style/webpack.config.js b/samples/grids/tree-grid/cell-selection-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/cell-selection-style/webpack.config.js
+++ b/samples/grids/tree-grid/cell-selection-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/clipboard-operations/package.json b/samples/grids/tree-grid/clipboard-operations/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/tree-grid/clipboard-operations/package.json
+++ b/samples/grids/tree-grid/clipboard-operations/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/clipboard-operations/webpack.config.js b/samples/grids/tree-grid/clipboard-operations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/clipboard-operations/webpack.config.js
+++ b/samples/grids/tree-grid/clipboard-operations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-auto-sizing/package.json b/samples/grids/tree-grid/column-auto-sizing/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-auto-sizing/package.json
+++ b/samples/grids/tree-grid/column-auto-sizing/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-auto-sizing/webpack.config.js b/samples/grids/tree-grid/column-auto-sizing/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-auto-sizing/webpack.config.js
+++ b/samples/grids/tree-grid/column-auto-sizing/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-collapsible-groups/package.json b/samples/grids/tree-grid/column-collapsible-groups/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/package.json
+++ b/samples/grids/tree-grid/column-collapsible-groups/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js b/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js
+++ b/samples/grids/tree-grid/column-collapsible-groups/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-data-types/package.json b/samples/grids/tree-grid/column-data-types/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/column-data-types/package.json
+++ b/samples/grids/tree-grid/column-data-types/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-data-types/webpack.config.js b/samples/grids/tree-grid/column-data-types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/column-data-types/webpack.config.js
+++ b/samples/grids/tree-grid/column-data-types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/package.json b/samples/grids/tree-grid/column-hiding-toolbar-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js b/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js
+++ b/samples/grids/tree-grid/column-hiding-toolbar-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/package.json b/samples/grids/tree-grid/column-hiding-toolbar/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/package.json
+++ b/samples/grids/tree-grid/column-hiding-toolbar/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js b/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js
+++ b/samples/grids/tree-grid/column-hiding-toolbar/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-moving-options/package.json b/samples/grids/tree-grid/column-moving-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-moving-options/package.json
+++ b/samples/grids/tree-grid/column-moving-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-moving-options/webpack.config.js b/samples/grids/tree-grid/column-moving-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-moving-options/webpack.config.js
+++ b/samples/grids/tree-grid/column-moving-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-moving-styles/package.json b/samples/grids/tree-grid/column-moving-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-moving-styles/package.json
+++ b/samples/grids/tree-grid/column-moving-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-moving-styles/webpack.config.js b/samples/grids/tree-grid/column-moving-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-moving-styles/webpack.config.js
+++ b/samples/grids/tree-grid/column-moving-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-pinning-options/package.json b/samples/grids/tree-grid/column-pinning-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-pinning-options/package.json
+++ b/samples/grids/tree-grid/column-pinning-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-pinning-options/webpack.config.js b/samples/grids/tree-grid/column-pinning-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-pinning-options/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-pinning-right-side/package.json b/samples/grids/tree-grid/column-pinning-right-side/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/package.json
+++ b/samples/grids/tree-grid/column-pinning-right-side/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js b/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-right-side/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-pinning-styles/package.json b/samples/grids/tree-grid/column-pinning-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-pinning-styles/package.json
+++ b/samples/grids/tree-grid/column-pinning-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-pinning-styles/webpack.config.js b/samples/grids/tree-grid/column-pinning-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-pinning-styles/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/package.json b/samples/grids/tree-grid/column-pinning-toolbar/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/package.json
+++ b/samples/grids/tree-grid/column-pinning-toolbar/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js b/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning-toolbar/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-pinning/package.json b/samples/grids/tree-grid/column-pinning/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-pinning/package.json
+++ b/samples/grids/tree-grid/column-pinning/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-pinning/webpack.config.js b/samples/grids/tree-grid/column-pinning/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-pinning/webpack.config.js
+++ b/samples/grids/tree-grid/column-pinning/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-resize-styling/package.json b/samples/grids/tree-grid/column-resize-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-resize-styling/package.json
+++ b/samples/grids/tree-grid/column-resize-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-resize-styling/webpack.config.js b/samples/grids/tree-grid/column-resize-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-resize-styling/webpack.config.js
+++ b/samples/grids/tree-grid/column-resize-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-resizing/package.json b/samples/grids/tree-grid/column-resizing/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-resizing/package.json
+++ b/samples/grids/tree-grid/column-resizing/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-resizing/webpack.config.js b/samples/grids/tree-grid/column-resizing/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-resizing/webpack.config.js
+++ b/samples/grids/tree-grid/column-resizing/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-selection-group/package.json b/samples/grids/tree-grid/column-selection-group/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-selection-group/package.json
+++ b/samples/grids/tree-grid/column-selection-group/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-selection-group/webpack.config.js b/samples/grids/tree-grid/column-selection-group/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-selection-group/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-group/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-selection-mode/package.json b/samples/grids/tree-grid/column-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/column-selection-mode/package.json
+++ b/samples/grids/tree-grid/column-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-selection-mode/webpack.config.js b/samples/grids/tree-grid/column-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-selection-style/package.json b/samples/grids/tree-grid/column-selection-style/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/column-selection-style/package.json
+++ b/samples/grids/tree-grid/column-selection-style/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-selection-style/webpack.config.js b/samples/grids/tree-grid/column-selection-style/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/column-selection-style/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-style/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-selection-styles/package.json b/samples/grids/tree-grid/column-selection-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-selection-styles/package.json
+++ b/samples/grids/tree-grid/column-selection-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-selection-styles/webpack.config.js b/samples/grids/tree-grid/column-selection-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-selection-styles/webpack.config.js
+++ b/samples/grids/tree-grid/column-selection-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-sorting-indicators/package.json b/samples/grids/tree-grid/column-sorting-indicators/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/package.json
+++ b/samples/grids/tree-grid/column-sorting-indicators/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js b/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
+++ b/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-sorting-options/package.json b/samples/grids/tree-grid/column-sorting-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/column-sorting-options/package.json
+++ b/samples/grids/tree-grid/column-sorting-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-sorting-options/webpack.config.js b/samples/grids/tree-grid/column-sorting-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-sorting-options/webpack.config.js
+++ b/samples/grids/tree-grid/column-sorting-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/column-sorting-style/package.json b/samples/grids/tree-grid/column-sorting-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/column-sorting-style/package.json
+++ b/samples/grids/tree-grid/column-sorting-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/column-sorting-style/webpack.config.js b/samples/grids/tree-grid/column-sorting-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/column-sorting-style/webpack.config.js
+++ b/samples/grids/tree-grid/column-sorting-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/package.json b/samples/grids/tree-grid/conditional-cell-style-1/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/package.json
+++ b/samples/grids/tree-grid/conditional-cell-style-1/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js b/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js
+++ b/samples/grids/tree-grid/conditional-cell-style-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/package.json b/samples/grids/tree-grid/conditional-cell-style-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/package.json
+++ b/samples/grids/tree-grid/conditional-cell-style-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js b/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js
+++ b/samples/grids/tree-grid/conditional-cell-style-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/conditional-row-selectors/package.json b/samples/grids/tree-grid/conditional-row-selectors/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/package.json
+++ b/samples/grids/tree-grid/conditional-row-selectors/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js b/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js
+++ b/samples/grids/tree-grid/conditional-row-selectors/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/custom-filtering/package.json b/samples/grids/tree-grid/custom-filtering/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/custom-filtering/package.json
+++ b/samples/grids/tree-grid/custom-filtering/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/custom-filtering/webpack.config.js b/samples/grids/tree-grid/custom-filtering/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/custom-filtering/webpack.config.js
+++ b/samples/grids/tree-grid/custom-filtering/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-exporting-indicator/package.json b/samples/grids/tree-grid/data-exporting-indicator/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/package.json
+++ b/samples/grids/tree-grid/data-exporting-indicator/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-exporting-indicator/webpack.config.js b/samples/grids/tree-grid/data-exporting-indicator/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/webpack.config.js
+++ b/samples/grids/tree-grid/data-exporting-indicator/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-searching/package.json b/samples/grids/tree-grid/data-searching/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/tree-grid/data-searching/package.json
+++ b/samples/grids/tree-grid/data-searching/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-searching/webpack.config.js b/samples/grids/tree-grid/data-searching/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/data-searching/webpack.config.js
+++ b/samples/grids/tree-grid/data-searching/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-summaries-custom/package.json b/samples/grids/tree-grid/data-summaries-custom/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/data-summaries-custom/package.json
+++ b/samples/grids/tree-grid/data-summaries-custom/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-summaries-custom/webpack.config.js b/samples/grids/tree-grid/data-summaries-custom/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/data-summaries-custom/webpack.config.js
+++ b/samples/grids/tree-grid/data-summaries-custom/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-summary-children/package.json b/samples/grids/tree-grid/data-summary-children/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/data-summary-children/package.json
+++ b/samples/grids/tree-grid/data-summary-children/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-summary-children/webpack.config.js b/samples/grids/tree-grid/data-summary-children/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/data-summary-children/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-children/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-summary-formatter/package.json b/samples/grids/tree-grid/data-summary-formatter/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/data-summary-formatter/package.json
+++ b/samples/grids/tree-grid/data-summary-formatter/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-summary-formatter/webpack.config.js b/samples/grids/tree-grid/data-summary-formatter/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/data-summary-formatter/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-formatter/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-summary-options-styling/package.json b/samples/grids/tree-grid/data-summary-options-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/package.json
+++ b/samples/grids/tree-grid/data-summary-options-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js b/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-options-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-summary-options/package.json b/samples/grids/tree-grid/data-summary-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/data-summary-options/package.json
+++ b/samples/grids/tree-grid/data-summary-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-summary-options/webpack.config.js b/samples/grids/tree-grid/data-summary-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/data-summary-options/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/data-summary-template/package.json b/samples/grids/tree-grid/data-summary-template/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/data-summary-template/package.json
+++ b/samples/grids/tree-grid/data-summary-template/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/data-summary-template/webpack.config.js b/samples/grids/tree-grid/data-summary-template/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/data-summary-template/webpack.config.js
+++ b/samples/grids/tree-grid/data-summary-template/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/editing-columns/package.json b/samples/grids/tree-grid/editing-columns/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/editing-columns/package.json
+++ b/samples/grids/tree-grid/editing-columns/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/editing-columns/webpack.config.js b/samples/grids/tree-grid/editing-columns/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/editing-columns/webpack.config.js
+++ b/samples/grids/tree-grid/editing-columns/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/editing-events/package.json b/samples/grids/tree-grid/editing-events/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/editing-events/package.json
+++ b/samples/grids/tree-grid/editing-events/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/editing-events/webpack.config.js b/samples/grids/tree-grid/editing-events/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/editing-events/webpack.config.js
+++ b/samples/grids/tree-grid/editing-events/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/editing-lifecycle/package.json b/samples/grids/tree-grid/editing-lifecycle/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/editing-lifecycle/package.json
+++ b/samples/grids/tree-grid/editing-lifecycle/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/editing-lifecycle/webpack.config.js b/samples/grids/tree-grid/editing-lifecycle/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/editing-lifecycle/webpack.config.js
+++ b/samples/grids/tree-grid/editing-lifecycle/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/excel-exporting/package.json b/samples/grids/tree-grid/excel-exporting/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/excel-exporting/package.json
+++ b/samples/grids/tree-grid/excel-exporting/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/excel-exporting/webpack.config.js b/samples/grids/tree-grid/excel-exporting/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/excel-exporting/webpack.config.js
+++ b/samples/grids/tree-grid/excel-exporting/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/package.json b/samples/grids/tree-grid/excel-style-filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/package.json
+++ b/samples/grids/tree-grid/excel-style-filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js b/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js
+++ b/samples/grids/tree-grid/excel-style-filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/filtering-options/package.json b/samples/grids/tree-grid/filtering-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/filtering-options/package.json
+++ b/samples/grids/tree-grid/filtering-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/filtering-options/webpack.config.js b/samples/grids/tree-grid/filtering-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/filtering-options/webpack.config.js
+++ b/samples/grids/tree-grid/filtering-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/filtering-style/package.json b/samples/grids/tree-grid/filtering-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/filtering-style/package.json
+++ b/samples/grids/tree-grid/filtering-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/filtering-style/webpack.config.js b/samples/grids/tree-grid/filtering-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/filtering-style/webpack.config.js
+++ b/samples/grids/tree-grid/filtering-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/finjs/package.json b/samples/grids/tree-grid/finjs/package.json
index 2f11499b49..a416730c1c 100644
--- a/samples/grids/tree-grid/finjs/package.json
+++ b/samples/grids/tree-grid/finjs/package.json
@@ -26,18 +26,19 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/finjs/webpack.config.js b/samples/grids/tree-grid/finjs/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/finjs/webpack.config.js
+++ b/samples/grids/tree-grid/finjs/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/package.json b/samples/grids/tree-grid/keyboard-custom-navigation/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/package.json
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js b/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js
+++ b/samples/grids/tree-grid/keyboard-custom-navigation/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/package.json b/samples/grids/tree-grid/keyboard-navigation-guide/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/package.json
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/keyboard-navigation-guide/webpack.config.js b/samples/grids/tree-grid/keyboard-navigation-guide/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/keyboard-navigation-guide/webpack.config.js
+++ b/samples/grids/tree-grid/keyboard-navigation-guide/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/layout-display-density/package.json b/samples/grids/tree-grid/layout-display-density/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/layout-display-density/package.json
+++ b/samples/grids/tree-grid/layout-display-density/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/layout-display-density/webpack.config.js b/samples/grids/tree-grid/layout-display-density/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/layout-display-density/webpack.config.js
+++ b/samples/grids/tree-grid/layout-display-density/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/load-on-demand/package.json b/samples/grids/tree-grid/load-on-demand/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/load-on-demand/package.json
+++ b/samples/grids/tree-grid/load-on-demand/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/load-on-demand/webpack.config.js b/samples/grids/tree-grid/load-on-demand/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/load-on-demand/webpack.config.js
+++ b/samples/grids/tree-grid/load-on-demand/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/package.json b/samples/grids/tree-grid/multi-cell-selection-mode/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/package.json
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/webpack.config.js b/samples/grids/tree-grid/multi-cell-selection-mode/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/multi-cell-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/multi-cell-selection-mode/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/multi-column-headers-export/package.json b/samples/grids/tree-grid/multi-column-headers-export/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-export/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-export/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/package.json b/samples/grids/tree-grid/multi-column-headers-overview/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-overview/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/package.json b/samples/grids/tree-grid/multi-column-headers-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/multi-column-headers-template/package.json b/samples/grids/tree-grid/multi-column-headers-template/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/package.json
+++ b/samples/grids/tree-grid/multi-column-headers-template/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js b/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js
+++ b/samples/grids/tree-grid/multi-column-headers-template/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/overview-styling/package.json b/samples/grids/tree-grid/overview-styling/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/overview-styling/package.json
+++ b/samples/grids/tree-grid/overview-styling/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/overview-styling/webpack.config.js b/samples/grids/tree-grid/overview-styling/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/overview-styling/webpack.config.js
+++ b/samples/grids/tree-grid/overview-styling/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/overview/package.json b/samples/grids/tree-grid/overview/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/overview/package.json
+++ b/samples/grids/tree-grid/overview/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/overview/webpack.config.js b/samples/grids/tree-grid/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/overview/webpack.config.js
+++ b/samples/grids/tree-grid/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-adding/package.json b/samples/grids/tree-grid/row-adding/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-adding/package.json
+++ b/samples/grids/tree-grid/row-adding/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-adding/webpack.config.js b/samples/grids/tree-grid/row-adding/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-adding/webpack.config.js
+++ b/samples/grids/tree-grid/row-adding/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-classes/package.json b/samples/grids/tree-grid/row-classes/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-classes/package.json
+++ b/samples/grids/tree-grid/row-classes/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-classes/webpack.config.js b/samples/grids/tree-grid/row-classes/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-classes/webpack.config.js
+++ b/samples/grids/tree-grid/row-classes/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-drag-base/package.json b/samples/grids/tree-grid/row-drag-base/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/row-drag-base/package.json
+++ b/samples/grids/tree-grid/row-drag-base/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-drag-base/webpack.config.js b/samples/grids/tree-grid/row-drag-base/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/row-drag-base/webpack.config.js
+++ b/samples/grids/tree-grid/row-drag-base/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-editing-options/package.json b/samples/grids/tree-grid/row-editing-options/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-editing-options/package.json
+++ b/samples/grids/tree-grid/row-editing-options/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-editing-options/webpack.config.js b/samples/grids/tree-grid/row-editing-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-editing-options/webpack.config.js
+++ b/samples/grids/tree-grid/row-editing-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-editing-style/package.json b/samples/grids/tree-grid/row-editing-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-editing-style/package.json
+++ b/samples/grids/tree-grid/row-editing-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-editing-style/webpack.config.js b/samples/grids/tree-grid/row-editing-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-editing-style/webpack.config.js
+++ b/samples/grids/tree-grid/row-editing-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-paging-basic/package.json b/samples/grids/tree-grid/row-paging-basic/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-paging-basic/package.json
+++ b/samples/grids/tree-grid/row-paging-basic/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-paging-basic/webpack.config.js b/samples/grids/tree-grid/row-paging-basic/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-paging-basic/webpack.config.js
+++ b/samples/grids/tree-grid/row-paging-basic/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-paging-options/package.json b/samples/grids/tree-grid/row-paging-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/row-paging-options/package.json
+++ b/samples/grids/tree-grid/row-paging-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-paging-options/webpack.config.js b/samples/grids/tree-grid/row-paging-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-paging-options/webpack.config.js
+++ b/samples/grids/tree-grid/row-paging-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-paging-style/package.json b/samples/grids/tree-grid/row-paging-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-paging-style/package.json
+++ b/samples/grids/tree-grid/row-paging-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-paging-style/webpack.config.js b/samples/grids/tree-grid/row-paging-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-paging-style/webpack.config.js
+++ b/samples/grids/tree-grid/row-paging-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/package.json b/samples/grids/tree-grid/row-pinning-extra-column/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/package.json
+++ b/samples/grids/tree-grid/row-pinning-extra-column/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js b/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js
+++ b/samples/grids/tree-grid/row-pinning-extra-column/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-pinning-options/package.json b/samples/grids/tree-grid/row-pinning-options/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/row-pinning-options/package.json
+++ b/samples/grids/tree-grid/row-pinning-options/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-pinning-options/webpack.config.js b/samples/grids/tree-grid/row-pinning-options/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-pinning-options/webpack.config.js
+++ b/samples/grids/tree-grid/row-pinning-options/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-pinning-style/package.json b/samples/grids/tree-grid/row-pinning-style/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-pinning-style/package.json
+++ b/samples/grids/tree-grid/row-pinning-style/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-pinning-style/webpack.config.js b/samples/grids/tree-grid/row-pinning-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-pinning-style/webpack.config.js
+++ b/samples/grids/tree-grid/row-pinning-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-reorder/package.json b/samples/grids/tree-grid/row-reorder/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-reorder/package.json
+++ b/samples/grids/tree-grid/row-reorder/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-reorder/webpack.config.js b/samples/grids/tree-grid/row-reorder/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-reorder/webpack.config.js
+++ b/samples/grids/tree-grid/row-reorder/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-selection-mode/package.json b/samples/grids/tree-grid/row-selection-mode/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/row-selection-mode/package.json
+++ b/samples/grids/tree-grid/row-selection-mode/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-selection-mode/webpack.config.js b/samples/grids/tree-grid/row-selection-mode/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-selection-mode/webpack.config.js
+++ b/samples/grids/tree-grid/row-selection-mode/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-selection-template-excel/package.json b/samples/grids/tree-grid/row-selection-template-excel/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/package.json
+++ b/samples/grids/tree-grid/row-selection-template-excel/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js b/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js
+++ b/samples/grids/tree-grid/row-selection-template-excel/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/package.json b/samples/grids/tree-grid/row-selection-template-numbers/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/package.json
+++ b/samples/grids/tree-grid/row-selection-template-numbers/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js b/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js
+++ b/samples/grids/tree-grid/row-selection-template-numbers/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/row-styles/package.json b/samples/grids/tree-grid/row-styles/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/row-styles/package.json
+++ b/samples/grids/tree-grid/row-styles/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/row-styles/webpack.config.js b/samples/grids/tree-grid/row-styles/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/row-styles/webpack.config.js
+++ b/samples/grids/tree-grid/row-styles/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/state-persistence-about/package.json b/samples/grids/tree-grid/state-persistence-about/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/tree-grid/state-persistence-about/package.json
+++ b/samples/grids/tree-grid/state-persistence-about/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/state-persistence-about/webpack.config.js b/samples/grids/tree-grid/state-persistence-about/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/state-persistence-about/webpack.config.js
+++ b/samples/grids/tree-grid/state-persistence-about/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/state-persistence-main/package.json b/samples/grids/tree-grid/state-persistence-main/package.json
index adac97a09e..8d33b71264 100644
--- a/samples/grids/tree-grid/state-persistence-main/package.json
+++ b/samples/grids/tree-grid/state-persistence-main/package.json
@@ -27,17 +27,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/state-persistence-main/webpack.config.js b/samples/grids/tree-grid/state-persistence-main/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/state-persistence-main/webpack.config.js
+++ b/samples/grids/tree-grid/state-persistence-main/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/toolbar-sample-1/package.json b/samples/grids/tree-grid/toolbar-sample-1/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-1/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js b/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-sample-1/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/toolbar-sample-2/package.json b/samples/grids/tree-grid/toolbar-sample-2/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-2/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/toolbar-sample-2/webpack.config.js b/samples/grids/tree-grid/toolbar-sample-2/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/toolbar-sample-2/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-sample-2/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/toolbar-sample-3/package.json b/samples/grids/tree-grid/toolbar-sample-3/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-3/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js b/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-sample-3/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/toolbar-sample-4/package.json b/samples/grids/tree-grid/toolbar-sample-4/package.json
index cdb657b4e1..dc6c474090 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-4/package.json
@@ -26,17 +26,18 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/toolbar-sample-4/webpack.config.js b/samples/grids/tree-grid/toolbar-sample-4/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-sample-4/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/toolbar-style/package.json b/samples/grids/tree-grid/toolbar-style/package.json
index 5edf764eb8..3cee119924 100644
--- a/samples/grids/tree-grid/toolbar-style/package.json
+++ b/samples/grids/tree-grid/toolbar-style/package.json
@@ -24,17 +24,18 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/toolbar-style/webpack.config.js b/samples/grids/tree-grid/toolbar-style/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/toolbar-style/webpack.config.js
+++ b/samples/grids/tree-grid/toolbar-style/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/package.json b/samples/grids/tree-grid/using-primary-foreign-keys/package.json
index 83cda268f9..c533caca72 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/package.json
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/package.json
@@ -23,17 +23,18 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-grids": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
-    "igniteui-webcomponents-layouts": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-grids": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
+    "igniteui-webcomponents-layouts": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js b/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js
+++ b/samples/grids/tree-grid/using-primary-foreign-keys/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree/basic-example/package.json b/samples/grids/tree/basic-example/package.json
index 312f0b2bd7..b6a9202891 100644
--- a/samples/grids/tree/basic-example/package.json
+++ b/samples/grids/tree/basic-example/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree/basic-example/webpack.config.js b/samples/grids/tree/basic-example/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree/basic-example/webpack.config.js
+++ b/samples/grids/tree/basic-example/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree/load-on-demand-virtualized/package.json b/samples/grids/tree/load-on-demand-virtualized/package.json
index ba04c8410d..b949be0348 100644
--- a/samples/grids/tree/load-on-demand-virtualized/package.json
+++ b/samples/grids/tree/load-on-demand-virtualized/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree/load-on-demand-virtualized/webpack.config.js b/samples/grids/tree/load-on-demand-virtualized/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree/load-on-demand-virtualized/webpack.config.js
+++ b/samples/grids/tree/load-on-demand-virtualized/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/grids/tree/load-on-demand/package.json b/samples/grids/tree/load-on-demand/package.json
index dbd4c5fdad..510d101b40 100644
--- a/samples/grids/tree/load-on-demand/package.json
+++ b/samples/grids/tree/load-on-demand/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/grids/tree/load-on-demand/webpack.config.js b/samples/grids/tree/load-on-demand/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/grids/tree/load-on-demand/webpack.config.js
+++ b/samples/grids/tree/load-on-demand/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/badge/outlined/package.json b/samples/inputs/badge/outlined/package.json
index cfde1c1c60..aeb708fd24 100644
--- a/samples/inputs/badge/outlined/package.json
+++ b/samples/inputs/badge/outlined/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/badge/outlined/webpack.config.js b/samples/inputs/badge/outlined/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/badge/outlined/webpack.config.js
+++ b/samples/inputs/badge/outlined/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/badge/shape/package.json b/samples/inputs/badge/shape/package.json
index 24bd3ebecf..4475cc8f3b 100644
--- a/samples/inputs/badge/shape/package.json
+++ b/samples/inputs/badge/shape/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/badge/shape/webpack.config.js b/samples/inputs/badge/shape/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/badge/shape/webpack.config.js
+++ b/samples/inputs/badge/shape/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/badge/variants/package.json b/samples/inputs/badge/variants/package.json
index 72eff6857d..d11d1c39f7 100644
--- a/samples/inputs/badge/variants/package.json
+++ b/samples/inputs/badge/variants/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/badge/variants/webpack.config.js b/samples/inputs/badge/variants/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/badge/variants/webpack.config.js
+++ b/samples/inputs/badge/variants/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button-group/alignment/package.json b/samples/inputs/button-group/alignment/package.json
index a888b906a6..556fbb5e65 100644
--- a/samples/inputs/button-group/alignment/package.json
+++ b/samples/inputs/button-group/alignment/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button-group/alignment/webpack.config.js b/samples/inputs/button-group/alignment/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button-group/alignment/webpack.config.js
+++ b/samples/inputs/button-group/alignment/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button-group/overview/package.json b/samples/inputs/button-group/overview/package.json
index 0f33ab51d9..761a9b23eb 100644
--- a/samples/inputs/button-group/overview/package.json
+++ b/samples/inputs/button-group/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button-group/overview/webpack.config.js b/samples/inputs/button-group/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button-group/overview/webpack.config.js
+++ b/samples/inputs/button-group/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button-group/selection/package.json b/samples/inputs/button-group/selection/package.json
index dbaadb0521..e21d08a746 100644
--- a/samples/inputs/button-group/selection/package.json
+++ b/samples/inputs/button-group/selection/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button-group/selection/webpack.config.js b/samples/inputs/button-group/selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button-group/selection/webpack.config.js
+++ b/samples/inputs/button-group/selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button-group/size/package.json b/samples/inputs/button-group/size/package.json
index fd86d04e78..04a9b51fda 100644
--- a/samples/inputs/button-group/size/package.json
+++ b/samples/inputs/button-group/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button-group/size/webpack.config.js b/samples/inputs/button-group/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button-group/size/webpack.config.js
+++ b/samples/inputs/button-group/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button-group/styling/package.json b/samples/inputs/button-group/styling/package.json
index 157fd4900c..94ebe8eeb1 100644
--- a/samples/inputs/button-group/styling/package.json
+++ b/samples/inputs/button-group/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button-group/styling/webpack.config.js b/samples/inputs/button-group/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button-group/styling/webpack.config.js
+++ b/samples/inputs/button-group/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/contained/package.json b/samples/inputs/button/contained/package.json
index ae562841e8..cf289deaba 100644
--- a/samples/inputs/button/contained/package.json
+++ b/samples/inputs/button/contained/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/contained/webpack.config.js b/samples/inputs/button/contained/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/contained/webpack.config.js
+++ b/samples/inputs/button/contained/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/download/package.json b/samples/inputs/button/download/package.json
index c6697e6c3e..c8e70944f0 100644
--- a/samples/inputs/button/download/package.json
+++ b/samples/inputs/button/download/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/download/webpack.config.js b/samples/inputs/button/download/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/download/webpack.config.js
+++ b/samples/inputs/button/download/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/fab/package.json b/samples/inputs/button/fab/package.json
index 8fb2dd7082..af36b6c3a1 100644
--- a/samples/inputs/button/fab/package.json
+++ b/samples/inputs/button/fab/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/fab/webpack.config.js b/samples/inputs/button/fab/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/fab/webpack.config.js
+++ b/samples/inputs/button/fab/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/flat/package.json b/samples/inputs/button/flat/package.json
index 749bf6ce19..19b64aaef7 100644
--- a/samples/inputs/button/flat/package.json
+++ b/samples/inputs/button/flat/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/flat/webpack.config.js b/samples/inputs/button/flat/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/flat/webpack.config.js
+++ b/samples/inputs/button/flat/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/outlined/package.json b/samples/inputs/button/outlined/package.json
index 5b99529282..e6aaca4b65 100644
--- a/samples/inputs/button/outlined/package.json
+++ b/samples/inputs/button/outlined/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/outlined/webpack.config.js b/samples/inputs/button/outlined/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/outlined/webpack.config.js
+++ b/samples/inputs/button/outlined/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/overview/package.json b/samples/inputs/button/overview/package.json
index a435519e62..759b426ad5 100644
--- a/samples/inputs/button/overview/package.json
+++ b/samples/inputs/button/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/overview/webpack.config.js b/samples/inputs/button/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/overview/webpack.config.js
+++ b/samples/inputs/button/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/size/package.json b/samples/inputs/button/size/package.json
index 42e59894f1..ae4f680efb 100644
--- a/samples/inputs/button/size/package.json
+++ b/samples/inputs/button/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/size/webpack.config.js b/samples/inputs/button/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/size/webpack.config.js
+++ b/samples/inputs/button/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/button/styling/package.json b/samples/inputs/button/styling/package.json
index bb8c4d396f..cb478d7a1d 100644
--- a/samples/inputs/button/styling/package.json
+++ b/samples/inputs/button/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/button/styling/webpack.config.js b/samples/inputs/button/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/button/styling/webpack.config.js
+++ b/samples/inputs/button/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/checkbox/checking/package.json b/samples/inputs/checkbox/checking/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/inputs/checkbox/checking/package.json
+++ b/samples/inputs/checkbox/checking/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/checkbox/checking/webpack.config.js b/samples/inputs/checkbox/checking/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/checkbox/checking/webpack.config.js
+++ b/samples/inputs/checkbox/checking/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/checkbox/disabled/package.json b/samples/inputs/checkbox/disabled/package.json
index 3db8b57e6a..f40e3d52e2 100644
--- a/samples/inputs/checkbox/disabled/package.json
+++ b/samples/inputs/checkbox/disabled/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/checkbox/disabled/webpack.config.js b/samples/inputs/checkbox/disabled/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/checkbox/disabled/webpack.config.js
+++ b/samples/inputs/checkbox/disabled/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/checkbox/indeterminate/package.json b/samples/inputs/checkbox/indeterminate/package.json
index f019e644ef..29e1f7a38e 100644
--- a/samples/inputs/checkbox/indeterminate/package.json
+++ b/samples/inputs/checkbox/indeterminate/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/checkbox/indeterminate/webpack.config.js b/samples/inputs/checkbox/indeterminate/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/checkbox/indeterminate/webpack.config.js
+++ b/samples/inputs/checkbox/indeterminate/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/checkbox/label/package.json b/samples/inputs/checkbox/label/package.json
index 8e83e551df..c00b2745d7 100644
--- a/samples/inputs/checkbox/label/package.json
+++ b/samples/inputs/checkbox/label/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/checkbox/label/webpack.config.js b/samples/inputs/checkbox/label/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/checkbox/label/webpack.config.js
+++ b/samples/inputs/checkbox/label/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/checkbox/overview/package.json b/samples/inputs/checkbox/overview/package.json
index ff6b7bb252..f1ec953421 100644
--- a/samples/inputs/checkbox/overview/package.json
+++ b/samples/inputs/checkbox/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/checkbox/overview/webpack.config.js b/samples/inputs/checkbox/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/checkbox/overview/webpack.config.js
+++ b/samples/inputs/checkbox/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/chip/multiple/package.json b/samples/inputs/chip/multiple/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/inputs/chip/multiple/package.json
+++ b/samples/inputs/chip/multiple/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/chip/multiple/webpack.config.js b/samples/inputs/chip/multiple/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/chip/multiple/webpack.config.js
+++ b/samples/inputs/chip/multiple/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/chip/overview/package.json b/samples/inputs/chip/overview/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/inputs/chip/overview/package.json
+++ b/samples/inputs/chip/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/chip/overview/webpack.config.js b/samples/inputs/chip/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/chip/overview/webpack.config.js
+++ b/samples/inputs/chip/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/chip/size/package.json b/samples/inputs/chip/size/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/inputs/chip/size/package.json
+++ b/samples/inputs/chip/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/chip/size/webpack.config.js b/samples/inputs/chip/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/chip/size/webpack.config.js
+++ b/samples/inputs/chip/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/chip/styling/package.json b/samples/inputs/chip/styling/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/inputs/chip/styling/package.json
+++ b/samples/inputs/chip/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/chip/styling/webpack.config.js b/samples/inputs/chip/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/chip/styling/webpack.config.js
+++ b/samples/inputs/chip/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/chip/variants/package.json b/samples/inputs/chip/variants/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/inputs/chip/variants/package.json
+++ b/samples/inputs/chip/variants/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/chip/variants/webpack.config.js b/samples/inputs/chip/variants/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/chip/variants/webpack.config.js
+++ b/samples/inputs/chip/variants/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/circular-progress-indicator/dynamic/package.json b/samples/inputs/circular-progress-indicator/dynamic/package.json
index 70e510419e..5ae9e6e2c6 100644
--- a/samples/inputs/circular-progress-indicator/dynamic/package.json
+++ b/samples/inputs/circular-progress-indicator/dynamic/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/circular-progress-indicator/dynamic/webpack.config.js b/samples/inputs/circular-progress-indicator/dynamic/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/circular-progress-indicator/dynamic/webpack.config.js
+++ b/samples/inputs/circular-progress-indicator/dynamic/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/circular-progress-indicator/indeterminate/package.json b/samples/inputs/circular-progress-indicator/indeterminate/package.json
index 52a46a6f09..cfd609454b 100644
--- a/samples/inputs/circular-progress-indicator/indeterminate/package.json
+++ b/samples/inputs/circular-progress-indicator/indeterminate/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/circular-progress-indicator/indeterminate/webpack.config.js b/samples/inputs/circular-progress-indicator/indeterminate/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/circular-progress-indicator/indeterminate/webpack.config.js
+++ b/samples/inputs/circular-progress-indicator/indeterminate/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/circular-progress-indicator/simple/package.json b/samples/inputs/circular-progress-indicator/simple/package.json
index 403f8a13d9..ee4b821ffb 100644
--- a/samples/inputs/circular-progress-indicator/simple/package.json
+++ b/samples/inputs/circular-progress-indicator/simple/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/circular-progress-indicator/simple/webpack.config.js b/samples/inputs/circular-progress-indicator/simple/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/circular-progress-indicator/simple/webpack.config.js
+++ b/samples/inputs/circular-progress-indicator/simple/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/circular-progress-indicator/styling/package.json b/samples/inputs/circular-progress-indicator/styling/package.json
index db40385a23..70cad6703b 100644
--- a/samples/inputs/circular-progress-indicator/styling/package.json
+++ b/samples/inputs/circular-progress-indicator/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/circular-progress-indicator/styling/webpack.config.js b/samples/inputs/circular-progress-indicator/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/circular-progress-indicator/styling/webpack.config.js
+++ b/samples/inputs/circular-progress-indicator/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/color-editor/overview/package.json b/samples/inputs/color-editor/overview/package.json
index 3384edda3b..3a9392dc83 100644
--- a/samples/inputs/color-editor/overview/package.json
+++ b/samples/inputs/color-editor/overview/package.json
@@ -23,15 +23,16 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-inputs": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-inputs": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/color-editor/overview/webpack.config.js b/samples/inputs/color-editor/overview/webpack.config.js
index 1de7f08279..e90479cd73 100644
--- a/samples/inputs/color-editor/overview/webpack.config.js
+++ b/samples/inputs/color-editor/overview/webpack.config.js
@@ -63,7 +63,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -76,7 +77,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/combo/features/package.json b/samples/inputs/combo/features/package.json
index 7049b3d1db..35916736e7 100644
--- a/samples/inputs/combo/features/package.json
+++ b/samples/inputs/combo/features/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/combo/features/webpack.config.js b/samples/inputs/combo/features/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/combo/features/webpack.config.js
+++ b/samples/inputs/combo/features/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/combo/overview/package.json b/samples/inputs/combo/overview/package.json
index 425778ed5f..aef5461509 100644
--- a/samples/inputs/combo/overview/package.json
+++ b/samples/inputs/combo/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/combo/overview/webpack.config.js b/samples/inputs/combo/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/combo/overview/webpack.config.js
+++ b/samples/inputs/combo/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/combo/selection/package.json b/samples/inputs/combo/selection/package.json
index bd0a844c49..e8cba200aa 100644
--- a/samples/inputs/combo/selection/package.json
+++ b/samples/inputs/combo/selection/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/combo/selection/webpack.config.js b/samples/inputs/combo/selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/combo/selection/webpack.config.js
+++ b/samples/inputs/combo/selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/combo/simplified/package.json b/samples/inputs/combo/simplified/package.json
index e2794cf6d7..5c76c0e1b4 100644
--- a/samples/inputs/combo/simplified/package.json
+++ b/samples/inputs/combo/simplified/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/combo/simplified/webpack.config.js b/samples/inputs/combo/simplified/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/combo/simplified/webpack.config.js
+++ b/samples/inputs/combo/simplified/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/combo/styling/package.json b/samples/inputs/combo/styling/package.json
index c5dcf29133..9d53d629b8 100644
--- a/samples/inputs/combo/styling/package.json
+++ b/samples/inputs/combo/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/combo/styling/webpack.config.js b/samples/inputs/combo/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/combo/styling/webpack.config.js
+++ b/samples/inputs/combo/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/combo/templates/package.json b/samples/inputs/combo/templates/package.json
index b277700fd3..f0d8965483 100644
--- a/samples/inputs/combo/templates/package.json
+++ b/samples/inputs/combo/templates/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/combo/templates/webpack.config.js b/samples/inputs/combo/templates/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/combo/templates/webpack.config.js
+++ b/samples/inputs/combo/templates/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/date-time-input/input-format-display-format/package.json b/samples/inputs/date-time-input/input-format-display-format/package.json
index 42cde79cbf..904396f70c 100644
--- a/samples/inputs/date-time-input/input-format-display-format/package.json
+++ b/samples/inputs/date-time-input/input-format-display-format/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/date-time-input/input-format-display-format/webpack.config.js b/samples/inputs/date-time-input/input-format-display-format/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/date-time-input/input-format-display-format/webpack.config.js
+++ b/samples/inputs/date-time-input/input-format-display-format/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/date-time-input/min-max-value/package.json b/samples/inputs/date-time-input/min-max-value/package.json
index 82328c4ced..b80216e9b8 100644
--- a/samples/inputs/date-time-input/min-max-value/package.json
+++ b/samples/inputs/date-time-input/min-max-value/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/date-time-input/min-max-value/webpack.config.js b/samples/inputs/date-time-input/min-max-value/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/date-time-input/min-max-value/webpack.config.js
+++ b/samples/inputs/date-time-input/min-max-value/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/date-time-input/overview/package.json b/samples/inputs/date-time-input/overview/package.json
index a14fcb3b71..da1c4c6149 100644
--- a/samples/inputs/date-time-input/overview/package.json
+++ b/samples/inputs/date-time-input/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/date-time-input/overview/webpack.config.js b/samples/inputs/date-time-input/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/date-time-input/overview/webpack.config.js
+++ b/samples/inputs/date-time-input/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/date-time-input/step-up-down/package.json b/samples/inputs/date-time-input/step-up-down/package.json
index 2e21fe2b51..65ad7dd6df 100644
--- a/samples/inputs/date-time-input/step-up-down/package.json
+++ b/samples/inputs/date-time-input/step-up-down/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/date-time-input/step-up-down/webpack.config.js b/samples/inputs/date-time-input/step-up-down/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/date-time-input/step-up-down/webpack.config.js
+++ b/samples/inputs/date-time-input/step-up-down/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/group/package.json b/samples/inputs/dropdown/group/package.json
index 2510928f04..96a9310afd 100644
--- a/samples/inputs/dropdown/group/package.json
+++ b/samples/inputs/dropdown/group/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/group/webpack.config.js b/samples/inputs/dropdown/group/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/group/webpack.config.js
+++ b/samples/inputs/dropdown/group/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/header/package.json b/samples/inputs/dropdown/header/package.json
index bfdb87b51c..96838cda10 100644
--- a/samples/inputs/dropdown/header/package.json
+++ b/samples/inputs/dropdown/header/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/header/webpack.config.js b/samples/inputs/dropdown/header/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/header/webpack.config.js
+++ b/samples/inputs/dropdown/header/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/item/package.json b/samples/inputs/dropdown/item/package.json
index 9f56942089..6393cbdbfe 100644
--- a/samples/inputs/dropdown/item/package.json
+++ b/samples/inputs/dropdown/item/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/item/webpack.config.js b/samples/inputs/dropdown/item/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/item/webpack.config.js
+++ b/samples/inputs/dropdown/item/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/overview/package.json b/samples/inputs/dropdown/overview/package.json
index 44aefb8462..4588f30233 100644
--- a/samples/inputs/dropdown/overview/package.json
+++ b/samples/inputs/dropdown/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/overview/webpack.config.js b/samples/inputs/dropdown/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/overview/webpack.config.js
+++ b/samples/inputs/dropdown/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/position/package.json b/samples/inputs/dropdown/position/package.json
index 3d436ec429..22f1b28c07 100644
--- a/samples/inputs/dropdown/position/package.json
+++ b/samples/inputs/dropdown/position/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/position/webpack.config.js b/samples/inputs/dropdown/position/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/position/webpack.config.js
+++ b/samples/inputs/dropdown/position/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/styling/package.json b/samples/inputs/dropdown/styling/package.json
index 9a428aadf9..bbcfd7dde4 100644
--- a/samples/inputs/dropdown/styling/package.json
+++ b/samples/inputs/dropdown/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/styling/webpack.config.js b/samples/inputs/dropdown/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/styling/webpack.config.js
+++ b/samples/inputs/dropdown/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/dropdown/target/package.json b/samples/inputs/dropdown/target/package.json
index 5c2f5e58de..7284fb428b 100644
--- a/samples/inputs/dropdown/target/package.json
+++ b/samples/inputs/dropdown/target/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/dropdown/target/webpack.config.js b/samples/inputs/dropdown/target/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/dropdown/target/webpack.config.js
+++ b/samples/inputs/dropdown/target/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/icon-button/size/package.json b/samples/inputs/icon-button/size/package.json
index ae562841e8..cf289deaba 100644
--- a/samples/inputs/icon-button/size/package.json
+++ b/samples/inputs/icon-button/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/icon-button/size/webpack.config.js b/samples/inputs/icon-button/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/icon-button/size/webpack.config.js
+++ b/samples/inputs/icon-button/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/icon-button/styling/package.json b/samples/inputs/icon-button/styling/package.json
index ae562841e8..cf289deaba 100644
--- a/samples/inputs/icon-button/styling/package.json
+++ b/samples/inputs/icon-button/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/icon-button/styling/webpack.config.js b/samples/inputs/icon-button/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/icon-button/styling/webpack.config.js
+++ b/samples/inputs/icon-button/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/icon-button/variant/package.json b/samples/inputs/icon-button/variant/package.json
index ae562841e8..cf289deaba 100644
--- a/samples/inputs/icon-button/variant/package.json
+++ b/samples/inputs/icon-button/variant/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/icon-button/variant/webpack.config.js b/samples/inputs/icon-button/variant/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/icon-button/variant/webpack.config.js
+++ b/samples/inputs/icon-button/variant/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/input/helper-text/package.json b/samples/inputs/input/helper-text/package.json
index ec78005144..f4a82f422a 100644
--- a/samples/inputs/input/helper-text/package.json
+++ b/samples/inputs/input/helper-text/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/input/helper-text/webpack.config.js b/samples/inputs/input/helper-text/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/input/helper-text/webpack.config.js
+++ b/samples/inputs/input/helper-text/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/input/overview/package.json b/samples/inputs/input/overview/package.json
index 6ef60a0be5..57ef50fb4b 100644
--- a/samples/inputs/input/overview/package.json
+++ b/samples/inputs/input/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/input/overview/webpack.config.js b/samples/inputs/input/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/input/overview/webpack.config.js
+++ b/samples/inputs/input/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/input/prefix-suffix/package.json b/samples/inputs/input/prefix-suffix/package.json
index 205fcf5e33..6a33cf8ee7 100644
--- a/samples/inputs/input/prefix-suffix/package.json
+++ b/samples/inputs/input/prefix-suffix/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/input/prefix-suffix/webpack.config.js b/samples/inputs/input/prefix-suffix/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/input/prefix-suffix/webpack.config.js
+++ b/samples/inputs/input/prefix-suffix/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/input/size/package.json b/samples/inputs/input/size/package.json
index 1dc83b1bbd..d0afab4533 100644
--- a/samples/inputs/input/size/package.json
+++ b/samples/inputs/input/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/input/size/webpack.config.js b/samples/inputs/input/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/input/size/webpack.config.js
+++ b/samples/inputs/input/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/input/styling/package.json b/samples/inputs/input/styling/package.json
index 2405873aa8..1158bebb65 100644
--- a/samples/inputs/input/styling/package.json
+++ b/samples/inputs/input/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/input/styling/webpack.config.js b/samples/inputs/input/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/input/styling/webpack.config.js
+++ b/samples/inputs/input/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/linear-progress-indicator/dynamic/package.json b/samples/inputs/linear-progress-indicator/dynamic/package.json
index 70e510419e..5ae9e6e2c6 100644
--- a/samples/inputs/linear-progress-indicator/dynamic/package.json
+++ b/samples/inputs/linear-progress-indicator/dynamic/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/linear-progress-indicator/dynamic/webpack.config.js b/samples/inputs/linear-progress-indicator/dynamic/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/linear-progress-indicator/dynamic/webpack.config.js
+++ b/samples/inputs/linear-progress-indicator/dynamic/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/linear-progress-indicator/simple/package.json b/samples/inputs/linear-progress-indicator/simple/package.json
index 392d02fd74..5005f0d1f1 100644
--- a/samples/inputs/linear-progress-indicator/simple/package.json
+++ b/samples/inputs/linear-progress-indicator/simple/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/linear-progress-indicator/simple/webpack.config.js b/samples/inputs/linear-progress-indicator/simple/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/linear-progress-indicator/simple/webpack.config.js
+++ b/samples/inputs/linear-progress-indicator/simple/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/linear-progress-indicator/striped/package.json b/samples/inputs/linear-progress-indicator/striped/package.json
index af4a98a828..4dba03cc15 100644
--- a/samples/inputs/linear-progress-indicator/striped/package.json
+++ b/samples/inputs/linear-progress-indicator/striped/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/linear-progress-indicator/striped/webpack.config.js b/samples/inputs/linear-progress-indicator/striped/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/linear-progress-indicator/striped/webpack.config.js
+++ b/samples/inputs/linear-progress-indicator/striped/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/linear-progress-indicator/styling/package.json b/samples/inputs/linear-progress-indicator/styling/package.json
index dce190319a..7c17b14790 100644
--- a/samples/inputs/linear-progress-indicator/styling/package.json
+++ b/samples/inputs/linear-progress-indicator/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/linear-progress-indicator/styling/webpack.config.js b/samples/inputs/linear-progress-indicator/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/linear-progress-indicator/styling/webpack.config.js
+++ b/samples/inputs/linear-progress-indicator/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/linear-progress-indicator/types/package.json b/samples/inputs/linear-progress-indicator/types/package.json
index 2c6dc5f7a9..de4f0aae66 100644
--- a/samples/inputs/linear-progress-indicator/types/package.json
+++ b/samples/inputs/linear-progress-indicator/types/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/linear-progress-indicator/types/webpack.config.js b/samples/inputs/linear-progress-indicator/types/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/linear-progress-indicator/types/webpack.config.js
+++ b/samples/inputs/linear-progress-indicator/types/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/mask-input/applying-mask/package.json b/samples/inputs/mask-input/applying-mask/package.json
index 9efcab15cf..764970781e 100644
--- a/samples/inputs/mask-input/applying-mask/package.json
+++ b/samples/inputs/mask-input/applying-mask/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/mask-input/applying-mask/webpack.config.js b/samples/inputs/mask-input/applying-mask/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/mask-input/applying-mask/webpack.config.js
+++ b/samples/inputs/mask-input/applying-mask/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/mask-input/overview/package.json b/samples/inputs/mask-input/overview/package.json
index 130f99a95a..0926059f58 100644
--- a/samples/inputs/mask-input/overview/package.json
+++ b/samples/inputs/mask-input/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/mask-input/overview/webpack.config.js b/samples/inputs/mask-input/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/mask-input/overview/webpack.config.js
+++ b/samples/inputs/mask-input/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/mask-input/value-modes/package.json b/samples/inputs/mask-input/value-modes/package.json
index 6cad065492..a7c10f88d1 100644
--- a/samples/inputs/mask-input/value-modes/package.json
+++ b/samples/inputs/mask-input/value-modes/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/mask-input/value-modes/webpack.config.js b/samples/inputs/mask-input/value-modes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/mask-input/value-modes/webpack.config.js
+++ b/samples/inputs/mask-input/value-modes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/radio/alignment/package.json b/samples/inputs/radio/alignment/package.json
index 6235e29911..b3ef2e240f 100644
--- a/samples/inputs/radio/alignment/package.json
+++ b/samples/inputs/radio/alignment/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/radio/alignment/webpack.config.js b/samples/inputs/radio/alignment/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/radio/alignment/webpack.config.js
+++ b/samples/inputs/radio/alignment/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/radio/disabled/package.json b/samples/inputs/radio/disabled/package.json
index 0da8972535..f455f2c7cc 100644
--- a/samples/inputs/radio/disabled/package.json
+++ b/samples/inputs/radio/disabled/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/radio/disabled/webpack.config.js b/samples/inputs/radio/disabled/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/radio/disabled/webpack.config.js
+++ b/samples/inputs/radio/disabled/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/radio/group/package.json b/samples/inputs/radio/group/package.json
index c7c9b233d7..b0a430cb8c 100644
--- a/samples/inputs/radio/group/package.json
+++ b/samples/inputs/radio/group/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/radio/group/webpack.config.js b/samples/inputs/radio/group/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/radio/group/webpack.config.js
+++ b/samples/inputs/radio/group/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/radio/invalid/package.json b/samples/inputs/radio/invalid/package.json
index 6533d2f44a..2b522dcb6e 100644
--- a/samples/inputs/radio/invalid/package.json
+++ b/samples/inputs/radio/invalid/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/radio/invalid/webpack.config.js b/samples/inputs/radio/invalid/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/radio/invalid/webpack.config.js
+++ b/samples/inputs/radio/invalid/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/radio/label/package.json b/samples/inputs/radio/label/package.json
index 4f17b9d9fd..7cea171643 100644
--- a/samples/inputs/radio/label/package.json
+++ b/samples/inputs/radio/label/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/radio/label/webpack.config.js b/samples/inputs/radio/label/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/radio/label/webpack.config.js
+++ b/samples/inputs/radio/label/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/radio/styling/package.json b/samples/inputs/radio/styling/package.json
index 0df1906438..d0a912d82a 100644
--- a/samples/inputs/radio/styling/package.json
+++ b/samples/inputs/radio/styling/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/radio/styling/webpack.config.js b/samples/inputs/radio/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/radio/styling/webpack.config.js
+++ b/samples/inputs/radio/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/rating/basic/package.json b/samples/inputs/rating/basic/package.json
index cfde1c1c60..aeb708fd24 100644
--- a/samples/inputs/rating/basic/package.json
+++ b/samples/inputs/rating/basic/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/rating/basic/webpack.config.js b/samples/inputs/rating/basic/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/rating/basic/webpack.config.js
+++ b/samples/inputs/rating/basic/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/rating/custom/package.json b/samples/inputs/rating/custom/package.json
index 675cf7412a..1c7ae1586e 100644
--- a/samples/inputs/rating/custom/package.json
+++ b/samples/inputs/rating/custom/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/rating/custom/webpack.config.js b/samples/inputs/rating/custom/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/rating/custom/webpack.config.js
+++ b/samples/inputs/rating/custom/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/rating/empty/package.json b/samples/inputs/rating/empty/package.json
index 2733e28a63..06902c586b 100644
--- a/samples/inputs/rating/empty/package.json
+++ b/samples/inputs/rating/empty/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/rating/empty/webpack.config.js b/samples/inputs/rating/empty/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/rating/empty/webpack.config.js
+++ b/samples/inputs/rating/empty/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/rating/single-selection/package.json b/samples/inputs/rating/single-selection/package.json
index 4f330ffb09..e197019ad9 100644
--- a/samples/inputs/rating/single-selection/package.json
+++ b/samples/inputs/rating/single-selection/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/rating/single-selection/webpack.config.js b/samples/inputs/rating/single-selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/rating/single-selection/webpack.config.js
+++ b/samples/inputs/rating/single-selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/rating/styling/package.json b/samples/inputs/rating/styling/package.json
index cfde1c1c60..aeb708fd24 100644
--- a/samples/inputs/rating/styling/package.json
+++ b/samples/inputs/rating/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/rating/styling/webpack.config.js b/samples/inputs/rating/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/rating/styling/webpack.config.js
+++ b/samples/inputs/rating/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/ripple/button/package.json b/samples/inputs/ripple/button/package.json
index 6c2a7df7ab..8787b06213 100644
--- a/samples/inputs/ripple/button/package.json
+++ b/samples/inputs/ripple/button/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/ripple/button/webpack.config.js b/samples/inputs/ripple/button/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/ripple/button/webpack.config.js
+++ b/samples/inputs/ripple/button/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/ripple/color/package.json b/samples/inputs/ripple/color/package.json
index cf08597820..9a242780bd 100644
--- a/samples/inputs/ripple/color/package.json
+++ b/samples/inputs/ripple/color/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/ripple/color/webpack.config.js b/samples/inputs/ripple/color/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/ripple/color/webpack.config.js
+++ b/samples/inputs/ripple/color/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/select/group/package.json b/samples/inputs/select/group/package.json
index 684099bea8..b290008631 100644
--- a/samples/inputs/select/group/package.json
+++ b/samples/inputs/select/group/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/select/group/webpack.config.js b/samples/inputs/select/group/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/select/group/webpack.config.js
+++ b/samples/inputs/select/group/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/select/header/package.json b/samples/inputs/select/header/package.json
index 46cf267ab8..31ef351505 100644
--- a/samples/inputs/select/header/package.json
+++ b/samples/inputs/select/header/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/select/header/webpack.config.js b/samples/inputs/select/header/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/select/header/webpack.config.js
+++ b/samples/inputs/select/header/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/select/item/package.json b/samples/inputs/select/item/package.json
index 694b804a85..ac217eff44 100644
--- a/samples/inputs/select/item/package.json
+++ b/samples/inputs/select/item/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/select/item/webpack.config.js b/samples/inputs/select/item/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/select/item/webpack.config.js
+++ b/samples/inputs/select/item/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/select/overview/package.json b/samples/inputs/select/overview/package.json
index 909df82ca1..bcffffad66 100644
--- a/samples/inputs/select/overview/package.json
+++ b/samples/inputs/select/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/select/overview/webpack.config.js b/samples/inputs/select/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/select/overview/webpack.config.js
+++ b/samples/inputs/select/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/select/styling/package.json b/samples/inputs/select/styling/package.json
index 391100c270..192efdd20c 100644
--- a/samples/inputs/select/styling/package.json
+++ b/samples/inputs/select/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/select/styling/webpack.config.js b/samples/inputs/select/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/select/styling/webpack.config.js
+++ b/samples/inputs/select/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/constraints/package.json b/samples/inputs/slider/constraints/package.json
index ac57015439..0005549bf5 100644
--- a/samples/inputs/slider/constraints/package.json
+++ b/samples/inputs/slider/constraints/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/constraints/webpack.config.js b/samples/inputs/slider/constraints/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/constraints/webpack.config.js
+++ b/samples/inputs/slider/constraints/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/disabled/package.json b/samples/inputs/slider/disabled/package.json
index 5776cfc8c9..6b96a5d864 100644
--- a/samples/inputs/slider/disabled/package.json
+++ b/samples/inputs/slider/disabled/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/disabled/webpack.config.js b/samples/inputs/slider/disabled/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/disabled/webpack.config.js
+++ b/samples/inputs/slider/disabled/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/discrete/package.json b/samples/inputs/slider/discrete/package.json
index a6027add58..36565a02e1 100644
--- a/samples/inputs/slider/discrete/package.json
+++ b/samples/inputs/slider/discrete/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/discrete/webpack.config.js b/samples/inputs/slider/discrete/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/discrete/webpack.config.js
+++ b/samples/inputs/slider/discrete/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/labels/package.json b/samples/inputs/slider/labels/package.json
index 1c10bdb47b..9d661bccb1 100644
--- a/samples/inputs/slider/labels/package.json
+++ b/samples/inputs/slider/labels/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/labels/webpack.config.js b/samples/inputs/slider/labels/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/labels/webpack.config.js
+++ b/samples/inputs/slider/labels/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/overview/package.json b/samples/inputs/slider/overview/package.json
index 659439cb8f..e590db83b0 100644
--- a/samples/inputs/slider/overview/package.json
+++ b/samples/inputs/slider/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/overview/webpack.config.js b/samples/inputs/slider/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/overview/webpack.config.js
+++ b/samples/inputs/slider/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/styling/package.json b/samples/inputs/slider/styling/package.json
index e382404313..bf7c50310a 100644
--- a/samples/inputs/slider/styling/package.json
+++ b/samples/inputs/slider/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/styling/webpack.config.js b/samples/inputs/slider/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/styling/webpack.config.js
+++ b/samples/inputs/slider/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/tick-labels/package.json b/samples/inputs/slider/tick-labels/package.json
index 4081006d92..754d403a2f 100644
--- a/samples/inputs/slider/tick-labels/package.json
+++ b/samples/inputs/slider/tick-labels/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/tick-labels/webpack.config.js b/samples/inputs/slider/tick-labels/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/tick-labels/webpack.config.js
+++ b/samples/inputs/slider/tick-labels/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/ticks/package.json b/samples/inputs/slider/ticks/package.json
index 1d8483313b..68569af714 100644
--- a/samples/inputs/slider/ticks/package.json
+++ b/samples/inputs/slider/ticks/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/ticks/webpack.config.js b/samples/inputs/slider/ticks/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/ticks/webpack.config.js
+++ b/samples/inputs/slider/ticks/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/value-format/package.json b/samples/inputs/slider/value-format/package.json
index c98ca6a4da..f866c9ef45 100644
--- a/samples/inputs/slider/value-format/package.json
+++ b/samples/inputs/slider/value-format/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/value-format/webpack.config.js b/samples/inputs/slider/value-format/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/value-format/webpack.config.js
+++ b/samples/inputs/slider/value-format/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/slider/value/package.json b/samples/inputs/slider/value/package.json
index f161e45f0e..a455c79266 100644
--- a/samples/inputs/slider/value/package.json
+++ b/samples/inputs/slider/value/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/slider/value/webpack.config.js b/samples/inputs/slider/value/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/slider/value/webpack.config.js
+++ b/samples/inputs/slider/value/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/switches/checking/package.json b/samples/inputs/switches/checking/package.json
index aa2e9232ed..42c5a42751 100644
--- a/samples/inputs/switches/checking/package.json
+++ b/samples/inputs/switches/checking/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/switches/checking/webpack.config.js b/samples/inputs/switches/checking/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/switches/checking/webpack.config.js
+++ b/samples/inputs/switches/checking/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/switches/disabled/package.json b/samples/inputs/switches/disabled/package.json
index 5d58f2b479..ea321afaa1 100644
--- a/samples/inputs/switches/disabled/package.json
+++ b/samples/inputs/switches/disabled/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/switches/disabled/webpack.config.js b/samples/inputs/switches/disabled/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/switches/disabled/webpack.config.js
+++ b/samples/inputs/switches/disabled/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/switches/label/package.json b/samples/inputs/switches/label/package.json
index ee23b9f6fb..28d8a97a93 100644
--- a/samples/inputs/switches/label/package.json
+++ b/samples/inputs/switches/label/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/switches/label/webpack.config.js b/samples/inputs/switches/label/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/switches/label/webpack.config.js
+++ b/samples/inputs/switches/label/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/switches/overview/package.json b/samples/inputs/switches/overview/package.json
index bf2a991834..693d39c93a 100644
--- a/samples/inputs/switches/overview/package.json
+++ b/samples/inputs/switches/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/switches/overview/webpack.config.js b/samples/inputs/switches/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/switches/overview/webpack.config.js
+++ b/samples/inputs/switches/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json
index 427b3641ba..c6d1150e31 100644
--- a/samples/inputs/textarea/form-integration/package.json
+++ b/samples/inputs/textarea/form-integration/package.json
@@ -31,7 +31,8 @@
     "devDependencies": {
         "@babel/cli": "^7.8.3",
         "@babel/core": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.10.0",
         "@babel/preset-env": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/textarea/form-integration/webpack.config.js b/samples/inputs/textarea/form-integration/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/textarea/form-integration/webpack.config.js
+++ b/samples/inputs/textarea/form-integration/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json
index c9327e978d..edc1d9a3d2 100644
--- a/samples/inputs/textarea/overview/package.json
+++ b/samples/inputs/textarea/overview/package.json
@@ -31,7 +31,8 @@
     "devDependencies": {
         "@babel/cli": "^7.8.3",
         "@babel/core": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.10.0",
         "@babel/preset-env": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/textarea/overview/webpack.config.js b/samples/inputs/textarea/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/textarea/overview/webpack.config.js
+++ b/samples/inputs/textarea/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json
index b1e09567bf..0c528aca33 100644
--- a/samples/inputs/textarea/resize/package.json
+++ b/samples/inputs/textarea/resize/package.json
@@ -31,7 +31,8 @@
     "devDependencies": {
         "@babel/cli": "^7.8.3",
         "@babel/core": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.10.0",
         "@babel/preset-env": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/textarea/resize/webpack.config.js b/samples/inputs/textarea/resize/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/textarea/resize/webpack.config.js
+++ b/samples/inputs/textarea/resize/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json
index 131d7b709b..f62343b565 100644
--- a/samples/inputs/textarea/slots/package.json
+++ b/samples/inputs/textarea/slots/package.json
@@ -31,7 +31,8 @@
     "devDependencies": {
         "@babel/cli": "^7.8.3",
         "@babel/core": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.10.0",
         "@babel/preset-env": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/textarea/slots/webpack.config.js b/samples/inputs/textarea/slots/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/textarea/slots/webpack.config.js
+++ b/samples/inputs/textarea/slots/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json
index ac76d20d5d..292a4235fc 100644
--- a/samples/inputs/textarea/styling/package.json
+++ b/samples/inputs/textarea/styling/package.json
@@ -31,7 +31,8 @@
     "devDependencies": {
         "@babel/cli": "^7.8.3",
         "@babel/core": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.10.0",
         "@babel/preset-env": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/inputs/textarea/styling/webpack.config.js b/samples/inputs/textarea/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/inputs/textarea/styling/webpack.config.js
+++ b/samples/inputs/textarea/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/accordion/customization/package.json b/samples/layouts/accordion/customization/package.json
index cbe3a37362..60d29b0326 100644
--- a/samples/layouts/accordion/customization/package.json
+++ b/samples/layouts/accordion/customization/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/accordion/customization/webpack.config.js b/samples/layouts/accordion/customization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/accordion/customization/webpack.config.js
+++ b/samples/layouts/accordion/customization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/accordion/nested-scenario/package.json b/samples/layouts/accordion/nested-scenario/package.json
index cbe3a37362..60d29b0326 100644
--- a/samples/layouts/accordion/nested-scenario/package.json
+++ b/samples/layouts/accordion/nested-scenario/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/accordion/nested-scenario/webpack.config.js b/samples/layouts/accordion/nested-scenario/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/accordion/nested-scenario/webpack.config.js
+++ b/samples/layouts/accordion/nested-scenario/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/accordion/overview/package.json b/samples/layouts/accordion/overview/package.json
index cbe3a37362..60d29b0326 100644
--- a/samples/layouts/accordion/overview/package.json
+++ b/samples/layouts/accordion/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/accordion/overview/webpack.config.js b/samples/layouts/accordion/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/accordion/overview/webpack.config.js
+++ b/samples/layouts/accordion/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/avatar/icon/package.json b/samples/layouts/avatar/icon/package.json
index 8cf9326d9e..50b74009bd 100644
--- a/samples/layouts/avatar/icon/package.json
+++ b/samples/layouts/avatar/icon/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/avatar/icon/webpack.config.js b/samples/layouts/avatar/icon/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/avatar/icon/webpack.config.js
+++ b/samples/layouts/avatar/icon/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/avatar/image/package.json b/samples/layouts/avatar/image/package.json
index a023eab393..ef59e67893 100644
--- a/samples/layouts/avatar/image/package.json
+++ b/samples/layouts/avatar/image/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/avatar/image/webpack.config.js b/samples/layouts/avatar/image/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/avatar/image/webpack.config.js
+++ b/samples/layouts/avatar/image/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/avatar/initials/package.json b/samples/layouts/avatar/initials/package.json
index 07ac3f7718..bd78a526e6 100644
--- a/samples/layouts/avatar/initials/package.json
+++ b/samples/layouts/avatar/initials/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/avatar/initials/webpack.config.js b/samples/layouts/avatar/initials/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/avatar/initials/webpack.config.js
+++ b/samples/layouts/avatar/initials/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/avatar/shape/package.json b/samples/layouts/avatar/shape/package.json
index eb732d771f..2f5ab90fc6 100644
--- a/samples/layouts/avatar/shape/package.json
+++ b/samples/layouts/avatar/shape/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/avatar/shape/webpack.config.js b/samples/layouts/avatar/shape/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/avatar/shape/webpack.config.js
+++ b/samples/layouts/avatar/shape/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/avatar/size/package.json b/samples/layouts/avatar/size/package.json
index 98225bddf6..213184b7ea 100644
--- a/samples/layouts/avatar/size/package.json
+++ b/samples/layouts/avatar/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/avatar/size/webpack.config.js b/samples/layouts/avatar/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/avatar/size/webpack.config.js
+++ b/samples/layouts/avatar/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/card/horizontal/package.json b/samples/layouts/card/horizontal/package.json
index 5eb5e68bb3..016be229dc 100644
--- a/samples/layouts/card/horizontal/package.json
+++ b/samples/layouts/card/horizontal/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/card/horizontal/webpack.config.js b/samples/layouts/card/horizontal/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/card/horizontal/webpack.config.js
+++ b/samples/layouts/card/horizontal/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/card/integration/package.json b/samples/layouts/card/integration/package.json
index 0455c43bf5..129484f8c7 100644
--- a/samples/layouts/card/integration/package.json
+++ b/samples/layouts/card/integration/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/card/integration/webpack.config.js b/samples/layouts/card/integration/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/card/integration/webpack.config.js
+++ b/samples/layouts/card/integration/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/card/overview/package.json b/samples/layouts/card/overview/package.json
index e28f7ee16b..1a6e54976f 100644
--- a/samples/layouts/card/overview/package.json
+++ b/samples/layouts/card/overview/package.json
@@ -32,7 +32,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/card/overview/webpack.config.js b/samples/layouts/card/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/card/overview/webpack.config.js
+++ b/samples/layouts/card/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/card/semi-horizontal/package.json b/samples/layouts/card/semi-horizontal/package.json
index 86d00e25f0..bbb89427cb 100644
--- a/samples/layouts/card/semi-horizontal/package.json
+++ b/samples/layouts/card/semi-horizontal/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/card/semi-horizontal/webpack.config.js b/samples/layouts/card/semi-horizontal/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/card/semi-horizontal/webpack.config.js
+++ b/samples/layouts/card/semi-horizontal/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/card/styling/package.json b/samples/layouts/card/styling/package.json
index 5fe6afa53e..978e43db74 100644
--- a/samples/layouts/card/styling/package.json
+++ b/samples/layouts/card/styling/package.json
@@ -32,7 +32,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/card/styling/webpack.config.js b/samples/layouts/card/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/card/styling/webpack.config.js
+++ b/samples/layouts/card/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/carousel/animations/package.json b/samples/layouts/carousel/animations/package.json
index deeb43cdcf..718bc4e908 100644
--- a/samples/layouts/carousel/animations/package.json
+++ b/samples/layouts/carousel/animations/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/carousel/animations/webpack.config.js b/samples/layouts/carousel/animations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/carousel/animations/webpack.config.js
+++ b/samples/layouts/carousel/animations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/carousel/components/package.json b/samples/layouts/carousel/components/package.json
index 79bf1ad548..a6cd1f6fe3 100644
--- a/samples/layouts/carousel/components/package.json
+++ b/samples/layouts/carousel/components/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/carousel/components/webpack.config.js b/samples/layouts/carousel/components/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/carousel/components/webpack.config.js
+++ b/samples/layouts/carousel/components/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/carousel/overview/package.json b/samples/layouts/carousel/overview/package.json
index bdc7e5644c..2a55eca2eb 100644
--- a/samples/layouts/carousel/overview/package.json
+++ b/samples/layouts/carousel/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/carousel/overview/webpack.config.js b/samples/layouts/carousel/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/carousel/overview/webpack.config.js
+++ b/samples/layouts/carousel/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/carousel/thumbnail/package.json b/samples/layouts/carousel/thumbnail/package.json
index 1f319c75ce..53a3a16a04 100644
--- a/samples/layouts/carousel/thumbnail/package.json
+++ b/samples/layouts/carousel/thumbnail/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/carousel/thumbnail/webpack.config.js b/samples/layouts/carousel/thumbnail/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/carousel/thumbnail/webpack.config.js
+++ b/samples/layouts/carousel/thumbnail/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/divider/dashed/package.json b/samples/layouts/divider/dashed/package.json
index 909df82ca1..bcffffad66 100644
--- a/samples/layouts/divider/dashed/package.json
+++ b/samples/layouts/divider/dashed/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/divider/dashed/webpack.config.js b/samples/layouts/divider/dashed/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/divider/dashed/webpack.config.js
+++ b/samples/layouts/divider/dashed/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/divider/middle/package.json b/samples/layouts/divider/middle/package.json
index 391100c270..192efdd20c 100644
--- a/samples/layouts/divider/middle/package.json
+++ b/samples/layouts/divider/middle/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/divider/middle/webpack.config.js b/samples/layouts/divider/middle/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/divider/middle/webpack.config.js
+++ b/samples/layouts/divider/middle/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/divider/overview/package.json b/samples/layouts/divider/overview/package.json
index 909df82ca1..bcffffad66 100644
--- a/samples/layouts/divider/overview/package.json
+++ b/samples/layouts/divider/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/divider/overview/webpack.config.js b/samples/layouts/divider/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/divider/overview/webpack.config.js
+++ b/samples/layouts/divider/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/divider/select/package.json b/samples/layouts/divider/select/package.json
index 909df82ca1..bcffffad66 100644
--- a/samples/layouts/divider/select/package.json
+++ b/samples/layouts/divider/select/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/divider/select/webpack.config.js b/samples/layouts/divider/select/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/divider/select/webpack.config.js
+++ b/samples/layouts/divider/select/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/divider/vertical/package.json b/samples/layouts/divider/vertical/package.json
index 391100c270..192efdd20c 100644
--- a/samples/layouts/divider/vertical/package.json
+++ b/samples/layouts/divider/vertical/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/divider/vertical/webpack.config.js b/samples/layouts/divider/vertical/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/divider/vertical/webpack.config.js
+++ b/samples/layouts/divider/vertical/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/add-content-runtime/package.json b/samples/layouts/dock-manager/add-content-runtime/package.json
index 5df1007e9f..6252e3bffc 100644
--- a/samples/layouts/dock-manager/add-content-runtime/package.json
+++ b/samples/layouts/dock-manager/add-content-runtime/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/add-content-runtime/webpack.config.js b/samples/layouts/dock-manager/add-content-runtime/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/add-content-runtime/webpack.config.js
+++ b/samples/layouts/dock-manager/add-content-runtime/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/contained-in-boundaries/package.json b/samples/layouts/dock-manager/contained-in-boundaries/package.json
index 67deda2e56..23b11a9979 100644
--- a/samples/layouts/dock-manager/contained-in-boundaries/package.json
+++ b/samples/layouts/dock-manager/contained-in-boundaries/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/contained-in-boundaries/webpack.config.js b/samples/layouts/dock-manager/contained-in-boundaries/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/contained-in-boundaries/webpack.config.js
+++ b/samples/layouts/dock-manager/contained-in-boundaries/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/customize-buttons/package.json b/samples/layouts/dock-manager/customize-buttons/package.json
index 49f800916e..26073ab942 100644
--- a/samples/layouts/dock-manager/customize-buttons/package.json
+++ b/samples/layouts/dock-manager/customize-buttons/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/customize-buttons/webpack.config.js b/samples/layouts/dock-manager/customize-buttons/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/customize-buttons/webpack.config.js
+++ b/samples/layouts/dock-manager/customize-buttons/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/embedding-frames/package.json b/samples/layouts/dock-manager/embedding-frames/package.json
index fdc7b3fdbb..6bc5791302 100644
--- a/samples/layouts/dock-manager/embedding-frames/package.json
+++ b/samples/layouts/dock-manager/embedding-frames/package.json
@@ -24,14 +24,15 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.16.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/embedding-frames/webpack.config.js b/samples/layouts/dock-manager/embedding-frames/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/embedding-frames/webpack.config.js
+++ b/samples/layouts/dock-manager/embedding-frames/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/focus-panes/package.json b/samples/layouts/dock-manager/focus-panes/package.json
index 5df1007e9f..6252e3bffc 100644
--- a/samples/layouts/dock-manager/focus-panes/package.json
+++ b/samples/layouts/dock-manager/focus-panes/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/focus-panes/webpack.config.js b/samples/layouts/dock-manager/focus-panes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/focus-panes/webpack.config.js
+++ b/samples/layouts/dock-manager/focus-panes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/hide-pane-headers/package.json b/samples/layouts/dock-manager/hide-pane-headers/package.json
index 5df1007e9f..6252e3bffc 100644
--- a/samples/layouts/dock-manager/hide-pane-headers/package.json
+++ b/samples/layouts/dock-manager/hide-pane-headers/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/hide-pane-headers/webpack.config.js b/samples/layouts/dock-manager/hide-pane-headers/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/hide-pane-headers/webpack.config.js
+++ b/samples/layouts/dock-manager/hide-pane-headers/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/hiding-panes/package.json b/samples/layouts/dock-manager/hiding-panes/package.json
index 3d947a3cf7..32f9a47682 100644
--- a/samples/layouts/dock-manager/hiding-panes/package.json
+++ b/samples/layouts/dock-manager/hiding-panes/package.json
@@ -24,14 +24,15 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.16.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/hiding-panes/webpack.config.js b/samples/layouts/dock-manager/hiding-panes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/hiding-panes/webpack.config.js
+++ b/samples/layouts/dock-manager/hiding-panes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/overview/package.json b/samples/layouts/dock-manager/overview/package.json
index 6cecd25fbb..eabe6769ae 100644
--- a/samples/layouts/dock-manager/overview/package.json
+++ b/samples/layouts/dock-manager/overview/package.json
@@ -24,14 +24,15 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.16.0",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/overview/webpack.config.js b/samples/layouts/dock-manager/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/overview/webpack.config.js
+++ b/samples/layouts/dock-manager/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/proximity-dock/package.json b/samples/layouts/dock-manager/proximity-dock/package.json
index 38cd8adb61..7d89e5effa 100644
--- a/samples/layouts/dock-manager/proximity-dock/package.json
+++ b/samples/layouts/dock-manager/proximity-dock/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/proximity-dock/webpack.config.js b/samples/layouts/dock-manager/proximity-dock/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/proximity-dock/webpack.config.js
+++ b/samples/layouts/dock-manager/proximity-dock/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/package.json b/samples/layouts/dock-manager/split-pane-fixed-size/package.json
index 5373222db0..b5244479f7 100644
--- a/samples/layouts/dock-manager/split-pane-fixed-size/package.json
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js b/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/styling/package.json b/samples/layouts/dock-manager/styling/package.json
index 21bc3c6cea..fe6e5e255b 100644
--- a/samples/layouts/dock-manager/styling/package.json
+++ b/samples/layouts/dock-manager/styling/package.json
@@ -26,14 +26,15 @@
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.16.0",
     "igniteui-webcomponents": "5.2.1",
-    "igniteui-webcomponents-core": "5.2.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/styling/webpack.config.js b/samples/layouts/dock-manager/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/styling/webpack.config.js
+++ b/samples/layouts/dock-manager/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/toggle-inner-dock/package.json b/samples/layouts/dock-manager/toggle-inner-dock/package.json
index fb5e505b97..db84c47517 100644
--- a/samples/layouts/dock-manager/toggle-inner-dock/package.json
+++ b/samples/layouts/dock-manager/toggle-inner-dock/package.json
@@ -30,7 +30,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/toggle-inner-dock/webpack.config.js b/samples/layouts/dock-manager/toggle-inner-dock/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/toggle-inner-dock/webpack.config.js
+++ b/samples/layouts/dock-manager/toggle-inner-dock/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/dock-manager/updating-panes/package.json b/samples/layouts/dock-manager/updating-panes/package.json
index 98b99b7b35..eb3851f3bd 100644
--- a/samples/layouts/dock-manager/updating-panes/package.json
+++ b/samples/layouts/dock-manager/updating-panes/package.json
@@ -24,17 +24,18 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "igniteui-dockmanager": "1.16.0",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-gauges": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-gauges": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/dock-manager/updating-panes/webpack.config.js b/samples/layouts/dock-manager/updating-panes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/dock-manager/updating-panes/webpack.config.js
+++ b/samples/layouts/dock-manager/updating-panes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/expansion-panel/component-customization/package.json b/samples/layouts/expansion-panel/component-customization/package.json
index 1d203507fe..f63d1052d7 100644
--- a/samples/layouts/expansion-panel/component-customization/package.json
+++ b/samples/layouts/expansion-panel/component-customization/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/expansion-panel/component-customization/webpack.config.js b/samples/layouts/expansion-panel/component-customization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/expansion-panel/component-customization/webpack.config.js
+++ b/samples/layouts/expansion-panel/component-customization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/expansion-panel/properties-and-events/package.json b/samples/layouts/expansion-panel/properties-and-events/package.json
index 3d109130d4..c4176c779e 100644
--- a/samples/layouts/expansion-panel/properties-and-events/package.json
+++ b/samples/layouts/expansion-panel/properties-and-events/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/expansion-panel/properties-and-events/webpack.config.js b/samples/layouts/expansion-panel/properties-and-events/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/expansion-panel/properties-and-events/webpack.config.js
+++ b/samples/layouts/expansion-panel/properties-and-events/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/expansion-panel/styling/package.json b/samples/layouts/expansion-panel/styling/package.json
index d5f11b6a77..4341d50236 100644
--- a/samples/layouts/expansion-panel/styling/package.json
+++ b/samples/layouts/expansion-panel/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/expansion-panel/styling/webpack.config.js b/samples/layouts/expansion-panel/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/expansion-panel/styling/webpack.config.js
+++ b/samples/layouts/expansion-panel/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/expansion-panel/usage/package.json b/samples/layouts/expansion-panel/usage/package.json
index cbe3a37362..60d29b0326 100644
--- a/samples/layouts/expansion-panel/usage/package.json
+++ b/samples/layouts/expansion-panel/usage/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/expansion-panel/usage/webpack.config.js b/samples/layouts/expansion-panel/usage/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/expansion-panel/usage/webpack.config.js
+++ b/samples/layouts/expansion-panel/usage/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/icon/sizing/package.json b/samples/layouts/icon/sizing/package.json
index 3962f3067b..e200d58a84 100644
--- a/samples/layouts/icon/sizing/package.json
+++ b/samples/layouts/icon/sizing/package.json
@@ -34,7 +34,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/icon/sizing/webpack.config.js b/samples/layouts/icon/sizing/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/icon/sizing/webpack.config.js
+++ b/samples/layouts/icon/sizing/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/icon/styling/package.json b/samples/layouts/icon/styling/package.json
index 3962f3067b..e200d58a84 100644
--- a/samples/layouts/icon/styling/package.json
+++ b/samples/layouts/icon/styling/package.json
@@ -34,7 +34,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/icon/styling/webpack.config.js b/samples/layouts/icon/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/icon/styling/webpack.config.js
+++ b/samples/layouts/icon/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/stepper/animations/package.json b/samples/layouts/stepper/animations/package.json
index 502a444f8d..92b14b656e 100644
--- a/samples/layouts/stepper/animations/package.json
+++ b/samples/layouts/stepper/animations/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/stepper/animations/webpack.config.js b/samples/layouts/stepper/animations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/stepper/animations/webpack.config.js
+++ b/samples/layouts/stepper/animations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/stepper/linear/package.json b/samples/layouts/stepper/linear/package.json
index 7e18f11361..9c43c6b418 100644
--- a/samples/layouts/stepper/linear/package.json
+++ b/samples/layouts/stepper/linear/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/stepper/linear/webpack.config.js b/samples/layouts/stepper/linear/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/stepper/linear/webpack.config.js
+++ b/samples/layouts/stepper/linear/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/stepper/orientation/package.json b/samples/layouts/stepper/orientation/package.json
index b446991e58..caeaedfc0e 100644
--- a/samples/layouts/stepper/orientation/package.json
+++ b/samples/layouts/stepper/orientation/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/stepper/orientation/webpack.config.js b/samples/layouts/stepper/orientation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/stepper/orientation/webpack.config.js
+++ b/samples/layouts/stepper/orientation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/stepper/overview/package.json b/samples/layouts/stepper/overview/package.json
index a759d62bd2..76c5c41d2b 100644
--- a/samples/layouts/stepper/overview/package.json
+++ b/samples/layouts/stepper/overview/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/stepper/overview/webpack.config.js b/samples/layouts/stepper/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/stepper/overview/webpack.config.js
+++ b/samples/layouts/stepper/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/stepper/steptypes/package.json b/samples/layouts/stepper/steptypes/package.json
index eb1f6d8907..91b1f69ef8 100644
--- a/samples/layouts/stepper/steptypes/package.json
+++ b/samples/layouts/stepper/steptypes/package.json
@@ -33,7 +33,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/stepper/steptypes/webpack.config.js b/samples/layouts/stepper/steptypes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/stepper/steptypes/webpack.config.js
+++ b/samples/layouts/stepper/steptypes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/tabs/alignment/package.json b/samples/layouts/tabs/alignment/package.json
index fe933027fb..3e209a3091 100644
--- a/samples/layouts/tabs/alignment/package.json
+++ b/samples/layouts/tabs/alignment/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/tabs/alignment/webpack.config.js b/samples/layouts/tabs/alignment/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/tabs/alignment/webpack.config.js
+++ b/samples/layouts/tabs/alignment/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/tabs/overview/package.json b/samples/layouts/tabs/overview/package.json
index 2f52710195..888fe62e33 100644
--- a/samples/layouts/tabs/overview/package.json
+++ b/samples/layouts/tabs/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/tabs/overview/webpack.config.js b/samples/layouts/tabs/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/tabs/overview/webpack.config.js
+++ b/samples/layouts/tabs/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/tabs/prefix-suffix/package.json b/samples/layouts/tabs/prefix-suffix/package.json
index c2aff5ea09..7912bc715b 100644
--- a/samples/layouts/tabs/prefix-suffix/package.json
+++ b/samples/layouts/tabs/prefix-suffix/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/tabs/prefix-suffix/webpack.config.js b/samples/layouts/tabs/prefix-suffix/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/tabs/prefix-suffix/webpack.config.js
+++ b/samples/layouts/tabs/prefix-suffix/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/layouts/tabs/scrolling/package.json b/samples/layouts/tabs/scrolling/package.json
index 0ee256a7c7..6cd3e2b6ab 100644
--- a/samples/layouts/tabs/scrolling/package.json
+++ b/samples/layouts/tabs/scrolling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/layouts/tabs/scrolling/webpack.config.js b/samples/layouts/tabs/scrolling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/layouts/tabs/scrolling/webpack.config.js
+++ b/samples/layouts/tabs/scrolling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-data-csv/package.json b/samples/maps/geo-map/binding-data-csv/package.json
index 606da64eee..51553588c3 100644
--- a/samples/maps/geo-map/binding-data-csv/package.json
+++ b/samples/maps/geo-map/binding-data-csv/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-data-csv/webpack.config.js b/samples/maps/geo-map/binding-data-csv/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-data-csv/webpack.config.js
+++ b/samples/maps/geo-map/binding-data-csv/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-data-json-points/package.json b/samples/maps/geo-map/binding-data-json-points/package.json
index 623196b7f6..1e3a4776af 100644
--- a/samples/maps/geo-map/binding-data-json-points/package.json
+++ b/samples/maps/geo-map/binding-data-json-points/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-data-json-points/webpack.config.js b/samples/maps/geo-map/binding-data-json-points/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-data-json-points/webpack.config.js
+++ b/samples/maps/geo-map/binding-data-json-points/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-data-model/package.json b/samples/maps/geo-map/binding-data-model/package.json
index 5206a436c8..4409bbf2a4 100644
--- a/samples/maps/geo-map/binding-data-model/package.json
+++ b/samples/maps/geo-map/binding-data-model/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-data-model/webpack.config.js b/samples/maps/geo-map/binding-data-model/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-data-model/webpack.config.js
+++ b/samples/maps/geo-map/binding-data-model/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-multiple-shapes/package.json b/samples/maps/geo-map/binding-multiple-shapes/package.json
index 64e3e7c030..b27c7b7fe8 100644
--- a/samples/maps/geo-map/binding-multiple-shapes/package.json
+++ b/samples/maps/geo-map/binding-multiple-shapes/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-multiple-shapes/webpack.config.js b/samples/maps/geo-map/binding-multiple-shapes/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-multiple-shapes/webpack.config.js
+++ b/samples/maps/geo-map/binding-multiple-shapes/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-multiple-sources/package.json b/samples/maps/geo-map/binding-multiple-sources/package.json
index 3b471ebad8..1b2429fd3c 100644
--- a/samples/maps/geo-map/binding-multiple-sources/package.json
+++ b/samples/maps/geo-map/binding-multiple-sources/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-multiple-sources/webpack.config.js b/samples/maps/geo-map/binding-multiple-sources/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-multiple-sources/webpack.config.js
+++ b/samples/maps/geo-map/binding-multiple-sources/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-shp-points/package.json b/samples/maps/geo-map/binding-shp-points/package.json
index 93874938ed..5aec95b14f 100644
--- a/samples/maps/geo-map/binding-shp-points/package.json
+++ b/samples/maps/geo-map/binding-shp-points/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-shp-points/webpack.config.js b/samples/maps/geo-map/binding-shp-points/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-shp-points/webpack.config.js
+++ b/samples/maps/geo-map/binding-shp-points/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-shp-polygons/package.json b/samples/maps/geo-map/binding-shp-polygons/package.json
index 7fa7c4c912..d1c3588877 100644
--- a/samples/maps/geo-map/binding-shp-polygons/package.json
+++ b/samples/maps/geo-map/binding-shp-polygons/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-shp-polygons/webpack.config.js b/samples/maps/geo-map/binding-shp-polygons/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-shp-polygons/webpack.config.js
+++ b/samples/maps/geo-map/binding-shp-polygons/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/binding-shp-polylines/package.json b/samples/maps/geo-map/binding-shp-polylines/package.json
index 48f79a3df7..82f933a445 100644
--- a/samples/maps/geo-map/binding-shp-polylines/package.json
+++ b/samples/maps/geo-map/binding-shp-polylines/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/binding-shp-polylines/webpack.config.js b/samples/maps/geo-map/binding-shp-polylines/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/binding-shp-polylines/webpack.config.js
+++ b/samples/maps/geo-map/binding-shp-polylines/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/custom-tooltips/package.json b/samples/maps/geo-map/custom-tooltips/package.json
index 4fe5811497..6fa96e8f87 100644
--- a/samples/maps/geo-map/custom-tooltips/package.json
+++ b/samples/maps/geo-map/custom-tooltips/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/custom-tooltips/webpack.config.js b/samples/maps/geo-map/custom-tooltips/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/custom-tooltips/webpack.config.js
+++ b/samples/maps/geo-map/custom-tooltips/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/display-all-imagery/package.json b/samples/maps/geo-map/display-all-imagery/package.json
index e05ca374ad..a5c8da40db 100644
--- a/samples/maps/geo-map/display-all-imagery/package.json
+++ b/samples/maps/geo-map/display-all-imagery/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/display-all-imagery/webpack.config.js b/samples/maps/geo-map/display-all-imagery/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/display-all-imagery/webpack.config.js
+++ b/samples/maps/geo-map/display-all-imagery/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/display-bing-imagery/package.json b/samples/maps/geo-map/display-bing-imagery/package.json
index 181b0d59fc..650c4bce10 100644
--- a/samples/maps/geo-map/display-bing-imagery/package.json
+++ b/samples/maps/geo-map/display-bing-imagery/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/display-bing-imagery/webpack.config.js b/samples/maps/geo-map/display-bing-imagery/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/display-bing-imagery/webpack.config.js
+++ b/samples/maps/geo-map/display-bing-imagery/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/display-esri-imagery/package.json b/samples/maps/geo-map/display-esri-imagery/package.json
index 7b417813fb..c17550258a 100644
--- a/samples/maps/geo-map/display-esri-imagery/package.json
+++ b/samples/maps/geo-map/display-esri-imagery/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/display-esri-imagery/webpack.config.js b/samples/maps/geo-map/display-esri-imagery/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/display-esri-imagery/webpack.config.js
+++ b/samples/maps/geo-map/display-esri-imagery/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/display-heat-imagery/package.json b/samples/maps/geo-map/display-heat-imagery/package.json
index 5a2a6e6bfa..50dff4a59e 100644
--- a/samples/maps/geo-map/display-heat-imagery/package.json
+++ b/samples/maps/geo-map/display-heat-imagery/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/display-heat-imagery/webpack.config.js b/samples/maps/geo-map/display-heat-imagery/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/display-heat-imagery/webpack.config.js
+++ b/samples/maps/geo-map/display-heat-imagery/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/display-osm-imagery/package.json b/samples/maps/geo-map/display-osm-imagery/package.json
index e518ebcce7..de3a4e57f5 100644
--- a/samples/maps/geo-map/display-osm-imagery/package.json
+++ b/samples/maps/geo-map/display-osm-imagery/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/display-osm-imagery/webpack.config.js b/samples/maps/geo-map/display-osm-imagery/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/display-osm-imagery/webpack.config.js
+++ b/samples/maps/geo-map/display-osm-imagery/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/marker-template/package.json b/samples/maps/geo-map/marker-template/package.json
index a94553455d..1af9485d7e 100644
--- a/samples/maps/geo-map/marker-template/package.json
+++ b/samples/maps/geo-map/marker-template/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/marker-template/webpack.config.js b/samples/maps/geo-map/marker-template/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/marker-template/webpack.config.js
+++ b/samples/maps/geo-map/marker-template/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/marker-type/package.json b/samples/maps/geo-map/marker-type/package.json
index 24d5029bb5..7469d80250 100644
--- a/samples/maps/geo-map/marker-type/package.json
+++ b/samples/maps/geo-map/marker-type/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/marker-type/webpack.config.js b/samples/maps/geo-map/marker-type/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/marker-type/webpack.config.js
+++ b/samples/maps/geo-map/marker-type/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/navigation/package.json b/samples/maps/geo-map/navigation/package.json
index cf65019ca2..e9a3dd5efc 100644
--- a/samples/maps/geo-map/navigation/package.json
+++ b/samples/maps/geo-map/navigation/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/navigation/webpack.config.js b/samples/maps/geo-map/navigation/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/navigation/webpack.config.js
+++ b/samples/maps/geo-map/navigation/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/overview/package.json b/samples/maps/geo-map/overview/package.json
index 3d33a59556..5f7afa77a9 100644
--- a/samples/maps/geo-map/overview/package.json
+++ b/samples/maps/geo-map/overview/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/overview/webpack.config.js b/samples/maps/geo-map/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/overview/webpack.config.js
+++ b/samples/maps/geo-map/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/shape-styling/package.json b/samples/maps/geo-map/shape-styling/package.json
index 2549061390..3856f0beb5 100644
--- a/samples/maps/geo-map/shape-styling/package.json
+++ b/samples/maps/geo-map/shape-styling/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/shape-styling/webpack.config.js b/samples/maps/geo-map/shape-styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/shape-styling/webpack.config.js
+++ b/samples/maps/geo-map/shape-styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/synchronization/package.json b/samples/maps/geo-map/synchronization/package.json
index 132ea690ac..5b18aa343c 100644
--- a/samples/maps/geo-map/synchronization/package.json
+++ b/samples/maps/geo-map/synchronization/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/synchronization/webpack.config.js b/samples/maps/geo-map/synchronization/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/synchronization/webpack.config.js
+++ b/samples/maps/geo-map/synchronization/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/triangulating-data/package.json b/samples/maps/geo-map/triangulating-data/package.json
index 38ff3d58dd..d932f4fb46 100644
--- a/samples/maps/geo-map/triangulating-data/package.json
+++ b/samples/maps/geo-map/triangulating-data/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/triangulating-data/webpack.config.js b/samples/maps/geo-map/triangulating-data/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/triangulating-data/webpack.config.js
+++ b/samples/maps/geo-map/triangulating-data/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-scatter-area-series/package.json b/samples/maps/geo-map/type-scatter-area-series/package.json
index b11b12612f..eac477d7b5 100644
--- a/samples/maps/geo-map/type-scatter-area-series/package.json
+++ b/samples/maps/geo-map/type-scatter-area-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-scatter-area-series/webpack.config.js b/samples/maps/geo-map/type-scatter-area-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-scatter-area-series/webpack.config.js
+++ b/samples/maps/geo-map/type-scatter-area-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-scatter-bubble-series/package.json b/samples/maps/geo-map/type-scatter-bubble-series/package.json
index 01b92c7d5f..ea4900c8f8 100644
--- a/samples/maps/geo-map/type-scatter-bubble-series/package.json
+++ b/samples/maps/geo-map/type-scatter-bubble-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-scatter-bubble-series/webpack.config.js b/samples/maps/geo-map/type-scatter-bubble-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-scatter-bubble-series/webpack.config.js
+++ b/samples/maps/geo-map/type-scatter-bubble-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-scatter-contour-series/package.json b/samples/maps/geo-map/type-scatter-contour-series/package.json
index bea1e819fe..00ad5dfbde 100644
--- a/samples/maps/geo-map/type-scatter-contour-series/package.json
+++ b/samples/maps/geo-map/type-scatter-contour-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-scatter-contour-series/webpack.config.js b/samples/maps/geo-map/type-scatter-contour-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-scatter-contour-series/webpack.config.js
+++ b/samples/maps/geo-map/type-scatter-contour-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-scatter-density-series/package.json b/samples/maps/geo-map/type-scatter-density-series/package.json
index 54fcc263dc..e22e3ca90f 100644
--- a/samples/maps/geo-map/type-scatter-density-series/package.json
+++ b/samples/maps/geo-map/type-scatter-density-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-scatter-density-series/webpack.config.js b/samples/maps/geo-map/type-scatter-density-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-scatter-density-series/webpack.config.js
+++ b/samples/maps/geo-map/type-scatter-density-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-scatter-symbol-series/package.json b/samples/maps/geo-map/type-scatter-symbol-series/package.json
index c1819b9039..896d2edcc4 100644
--- a/samples/maps/geo-map/type-scatter-symbol-series/package.json
+++ b/samples/maps/geo-map/type-scatter-symbol-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-scatter-symbol-series/webpack.config.js b/samples/maps/geo-map/type-scatter-symbol-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-scatter-symbol-series/webpack.config.js
+++ b/samples/maps/geo-map/type-scatter-symbol-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-shape-polygon-series/package.json b/samples/maps/geo-map/type-shape-polygon-series/package.json
index 1fc87a684c..400b84e8a6 100644
--- a/samples/maps/geo-map/type-shape-polygon-series/package.json
+++ b/samples/maps/geo-map/type-shape-polygon-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-shape-polygon-series/webpack.config.js b/samples/maps/geo-map/type-shape-polygon-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-shape-polygon-series/webpack.config.js
+++ b/samples/maps/geo-map/type-shape-polygon-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/maps/geo-map/type-shape-polyline-series/package.json b/samples/maps/geo-map/type-shape-polyline-series/package.json
index 2753da0d30..91986676b9 100644
--- a/samples/maps/geo-map/type-shape-polyline-series/package.json
+++ b/samples/maps/geo-map/type-shape-polyline-series/package.json
@@ -23,16 +23,17 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents-charts": "5.2.0",
-    "igniteui-webcomponents-core": "5.2.0",
-    "igniteui-webcomponents-maps": "5.2.0",
+    "igniteui-webcomponents-charts": "5.2.1-beta.0",
+    "igniteui-webcomponents-core": "5.2.1-beta.0",
+    "igniteui-webcomponents-maps": "5.2.1-beta.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/maps/geo-map/type-shape-polyline-series/webpack.config.js b/samples/maps/geo-map/type-shape-polyline-series/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/maps/geo-map/type-shape-polyline-series/webpack.config.js
+++ b/samples/maps/geo-map/type-shape-polyline-series/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/menus/nav-bar/overview/package.json b/samples/menus/nav-bar/overview/package.json
index 09184df9a0..5af3df6865 100644
--- a/samples/menus/nav-bar/overview/package.json
+++ b/samples/menus/nav-bar/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/menus/nav-bar/overview/webpack.config.js b/samples/menus/nav-bar/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/menus/nav-bar/overview/webpack.config.js
+++ b/samples/menus/nav-bar/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/menus/nav-bar/styling/package.json b/samples/menus/nav-bar/styling/package.json
index 5f9782a9bb..daf2b635cd 100644
--- a/samples/menus/nav-bar/styling/package.json
+++ b/samples/menus/nav-bar/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/menus/nav-bar/styling/webpack.config.js b/samples/menus/nav-bar/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/menus/nav-bar/styling/webpack.config.js
+++ b/samples/menus/nav-bar/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/menus/nav-drawer/add-drawer-items/package.json b/samples/menus/nav-drawer/add-drawer-items/package.json
index 15f33fed2d..d1536990c8 100644
--- a/samples/menus/nav-drawer/add-drawer-items/package.json
+++ b/samples/menus/nav-drawer/add-drawer-items/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/menus/nav-drawer/add-drawer-items/webpack.config.js b/samples/menus/nav-drawer/add-drawer-items/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/menus/nav-drawer/add-drawer-items/webpack.config.js
+++ b/samples/menus/nav-drawer/add-drawer-items/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/menus/nav-drawer/add-mini/package.json b/samples/menus/nav-drawer/add-mini/package.json
index 14914e5028..f7b8796c41 100644
--- a/samples/menus/nav-drawer/add-mini/package.json
+++ b/samples/menus/nav-drawer/add-mini/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/menus/nav-drawer/add-mini/webpack.config.js b/samples/menus/nav-drawer/add-mini/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/menus/nav-drawer/add-mini/webpack.config.js
+++ b/samples/menus/nav-drawer/add-mini/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/menus/nav-drawer/add-positions-navbar/package.json b/samples/menus/nav-drawer/add-positions-navbar/package.json
index 9e9a411bbd..5c10b4fda5 100644
--- a/samples/menus/nav-drawer/add-positions-navbar/package.json
+++ b/samples/menus/nav-drawer/add-positions-navbar/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/menus/nav-drawer/add-positions-navbar/webpack.config.js b/samples/menus/nav-drawer/add-positions-navbar/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/menus/nav-drawer/add-positions-navbar/webpack.config.js
+++ b/samples/menus/nav-drawer/add-positions-navbar/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/menus/nav-drawer/styling/package.json b/samples/menus/nav-drawer/styling/package.json
index 833ba60655..9c6b65cd33 100644
--- a/samples/menus/nav-drawer/styling/package.json
+++ b/samples/menus/nav-drawer/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/menus/nav-drawer/styling/webpack.config.js b/samples/menus/nav-drawer/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/menus/nav-drawer/styling/webpack.config.js
+++ b/samples/menus/nav-drawer/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/banner/banner-advanced-sample/package.json b/samples/notifications/banner/banner-advanced-sample/package.json
index 990f8dcbb0..0b3969c317 100644
--- a/samples/notifications/banner/banner-advanced-sample/package.json
+++ b/samples/notifications/banner/banner-advanced-sample/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/banner/banner-advanced-sample/webpack.config.js b/samples/notifications/banner/banner-advanced-sample/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/banner/banner-advanced-sample/webpack.config.js
+++ b/samples/notifications/banner/banner-advanced-sample/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/banner/banner-sample-1/package.json b/samples/notifications/banner/banner-sample-1/package.json
index 2b480f6bc2..c3caac6eab 100644
--- a/samples/notifications/banner/banner-sample-1/package.json
+++ b/samples/notifications/banner/banner-sample-1/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/banner/banner-sample-1/webpack.config.js b/samples/notifications/banner/banner-sample-1/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/banner/banner-sample-1/webpack.config.js
+++ b/samples/notifications/banner/banner-sample-1/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/banner/banner-sample-2/package.json b/samples/notifications/banner/banner-sample-2/package.json
index 6b18d2f516..a696bf764a 100644
--- a/samples/notifications/banner/banner-sample-2/package.json
+++ b/samples/notifications/banner/banner-sample-2/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/banner/banner-sample-2/webpack.config.js b/samples/notifications/banner/banner-sample-2/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/banner/banner-sample-2/webpack.config.js
+++ b/samples/notifications/banner/banner-sample-2/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/banner/banner-styling/package.json b/samples/notifications/banner/banner-styling/package.json
index b18f61def0..3ba6b75acf 100644
--- a/samples/notifications/banner/banner-styling/package.json
+++ b/samples/notifications/banner/banner-styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/banner/banner-styling/webpack.config.js b/samples/notifications/banner/banner-styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/banner/banner-styling/webpack.config.js
+++ b/samples/notifications/banner/banner-styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/dialog/closing-variations/package.json b/samples/notifications/dialog/closing-variations/package.json
index d09aa04323..1f89b0dc09 100644
--- a/samples/notifications/dialog/closing-variations/package.json
+++ b/samples/notifications/dialog/closing-variations/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/dialog/closing-variations/webpack.config.js b/samples/notifications/dialog/closing-variations/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/dialog/closing-variations/webpack.config.js
+++ b/samples/notifications/dialog/closing-variations/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/dialog/form/package.json b/samples/notifications/dialog/form/package.json
index 721ec576ba..a2308341a1 100644
--- a/samples/notifications/dialog/form/package.json
+++ b/samples/notifications/dialog/form/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/dialog/form/webpack.config.js b/samples/notifications/dialog/form/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/dialog/form/webpack.config.js
+++ b/samples/notifications/dialog/form/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/dialog/overview/package.json b/samples/notifications/dialog/overview/package.json
index 59843a7910..4b99b3f5de 100644
--- a/samples/notifications/dialog/overview/package.json
+++ b/samples/notifications/dialog/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/dialog/overview/webpack.config.js b/samples/notifications/dialog/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/dialog/overview/webpack.config.js
+++ b/samples/notifications/dialog/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/dialog/styling/package.json b/samples/notifications/dialog/styling/package.json
index ce737b8aea..23031215d6 100644
--- a/samples/notifications/dialog/styling/package.json
+++ b/samples/notifications/dialog/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/dialog/styling/webpack.config.js b/samples/notifications/dialog/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/dialog/styling/webpack.config.js
+++ b/samples/notifications/dialog/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/snackbar/action-text/package.json b/samples/notifications/snackbar/action-text/package.json
index 6bc699d1d5..6a783ca737 100644
--- a/samples/notifications/snackbar/action-text/package.json
+++ b/samples/notifications/snackbar/action-text/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/snackbar/action-text/webpack.config.js b/samples/notifications/snackbar/action-text/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/snackbar/action-text/webpack.config.js
+++ b/samples/notifications/snackbar/action-text/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/snackbar/display-time/package.json b/samples/notifications/snackbar/display-time/package.json
index 6bc699d1d5..6a783ca737 100644
--- a/samples/notifications/snackbar/display-time/package.json
+++ b/samples/notifications/snackbar/display-time/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/snackbar/display-time/webpack.config.js b/samples/notifications/snackbar/display-time/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/snackbar/display-time/webpack.config.js
+++ b/samples/notifications/snackbar/display-time/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/snackbar/overview/package.json b/samples/notifications/snackbar/overview/package.json
index 6bc699d1d5..6a783ca737 100644
--- a/samples/notifications/snackbar/overview/package.json
+++ b/samples/notifications/snackbar/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/snackbar/overview/webpack.config.js b/samples/notifications/snackbar/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/snackbar/overview/webpack.config.js
+++ b/samples/notifications/snackbar/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/snackbar/styling/package.json b/samples/notifications/snackbar/styling/package.json
index 6bc699d1d5..6a783ca737 100644
--- a/samples/notifications/snackbar/styling/package.json
+++ b/samples/notifications/snackbar/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/snackbar/styling/webpack.config.js b/samples/notifications/snackbar/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/snackbar/styling/webpack.config.js
+++ b/samples/notifications/snackbar/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/toast/overview/package.json b/samples/notifications/toast/overview/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/notifications/toast/overview/package.json
+++ b/samples/notifications/toast/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/toast/overview/webpack.config.js b/samples/notifications/toast/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/toast/overview/webpack.config.js
+++ b/samples/notifications/toast/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/toast/properties/package.json b/samples/notifications/toast/properties/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/notifications/toast/properties/package.json
+++ b/samples/notifications/toast/properties/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/toast/properties/webpack.config.js b/samples/notifications/toast/properties/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/toast/properties/webpack.config.js
+++ b/samples/notifications/toast/properties/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/notifications/toast/styling/package.json b/samples/notifications/toast/styling/package.json
index b5541375f3..1c26d5a6ba 100644
--- a/samples/notifications/toast/styling/package.json
+++ b/samples/notifications/toast/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/notifications/toast/styling/webpack.config.js b/samples/notifications/toast/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/notifications/toast/styling/webpack.config.js
+++ b/samples/notifications/toast/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/disabled-dates/package.json b/samples/scheduling/calendar/disabled-dates/package.json
index 4ebb1db2f0..407546919d 100644
--- a/samples/scheduling/calendar/disabled-dates/package.json
+++ b/samples/scheduling/calendar/disabled-dates/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/disabled-dates/webpack.config.js b/samples/scheduling/calendar/disabled-dates/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/disabled-dates/webpack.config.js
+++ b/samples/scheduling/calendar/disabled-dates/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/formatting/package.json b/samples/scheduling/calendar/formatting/package.json
index 1a2420ec38..98b242b9ab 100644
--- a/samples/scheduling/calendar/formatting/package.json
+++ b/samples/scheduling/calendar/formatting/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/formatting/webpack.config.js b/samples/scheduling/calendar/formatting/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/formatting/webpack.config.js
+++ b/samples/scheduling/calendar/formatting/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/header/package.json b/samples/scheduling/calendar/header/package.json
index eb883a66a2..255841e26d 100644
--- a/samples/scheduling/calendar/header/package.json
+++ b/samples/scheduling/calendar/header/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/header/webpack.config.js b/samples/scheduling/calendar/header/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/header/webpack.config.js
+++ b/samples/scheduling/calendar/header/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/multiple-months/package.json b/samples/scheduling/calendar/multiple-months/package.json
index 7a487cc26d..d566f04825 100644
--- a/samples/scheduling/calendar/multiple-months/package.json
+++ b/samples/scheduling/calendar/multiple-months/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/multiple-months/webpack.config.js b/samples/scheduling/calendar/multiple-months/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/multiple-months/webpack.config.js
+++ b/samples/scheduling/calendar/multiple-months/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/multiple-selection/package.json b/samples/scheduling/calendar/multiple-selection/package.json
index ebb795d54d..a85cadffa2 100644
--- a/samples/scheduling/calendar/multiple-selection/package.json
+++ b/samples/scheduling/calendar/multiple-selection/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/multiple-selection/webpack.config.js b/samples/scheduling/calendar/multiple-selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/multiple-selection/webpack.config.js
+++ b/samples/scheduling/calendar/multiple-selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/overview/package.json b/samples/scheduling/calendar/overview/package.json
index 6a5882e69d..2f50625e25 100644
--- a/samples/scheduling/calendar/overview/package.json
+++ b/samples/scheduling/calendar/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/overview/webpack.config.js b/samples/scheduling/calendar/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/overview/webpack.config.js
+++ b/samples/scheduling/calendar/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/range-selection/package.json b/samples/scheduling/calendar/range-selection/package.json
index 6ef127d155..1d79a7d677 100644
--- a/samples/scheduling/calendar/range-selection/package.json
+++ b/samples/scheduling/calendar/range-selection/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/range-selection/webpack.config.js b/samples/scheduling/calendar/range-selection/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/range-selection/webpack.config.js
+++ b/samples/scheduling/calendar/range-selection/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/size/package.json b/samples/scheduling/calendar/size/package.json
index 8c65461ae4..f4482c0684 100644
--- a/samples/scheduling/calendar/size/package.json
+++ b/samples/scheduling/calendar/size/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/size/webpack.config.js b/samples/scheduling/calendar/size/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/size/webpack.config.js
+++ b/samples/scheduling/calendar/size/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/special-dates/package.json b/samples/scheduling/calendar/special-dates/package.json
index a350787e95..806cdf4cd2 100644
--- a/samples/scheduling/calendar/special-dates/package.json
+++ b/samples/scheduling/calendar/special-dates/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/special-dates/webpack.config.js b/samples/scheduling/calendar/special-dates/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/special-dates/webpack.config.js
+++ b/samples/scheduling/calendar/special-dates/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/styling/package.json b/samples/scheduling/calendar/styling/package.json
index 4fbd6d5bd5..c5b1af3fa7 100644
--- a/samples/scheduling/calendar/styling/package.json
+++ b/samples/scheduling/calendar/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/styling/webpack.config.js b/samples/scheduling/calendar/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/styling/webpack.config.js
+++ b/samples/scheduling/calendar/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/calendar/week-numbers/package.json b/samples/scheduling/calendar/week-numbers/package.json
index 46ac44fb44..fd1b7b436c 100644
--- a/samples/scheduling/calendar/week-numbers/package.json
+++ b/samples/scheduling/calendar/week-numbers/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/calendar/week-numbers/webpack.config.js b/samples/scheduling/calendar/week-numbers/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/calendar/week-numbers/webpack.config.js
+++ b/samples/scheduling/calendar/week-numbers/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/date-picker/dialog-mode/package.json b/samples/scheduling/date-picker/dialog-mode/package.json
index 12b2d782ea..bbd12d7b25 100644
--- a/samples/scheduling/date-picker/dialog-mode/package.json
+++ b/samples/scheduling/date-picker/dialog-mode/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/date-picker/dialog-mode/webpack.config.js b/samples/scheduling/date-picker/dialog-mode/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/date-picker/dialog-mode/webpack.config.js
+++ b/samples/scheduling/date-picker/dialog-mode/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/date-picker/form/package.json b/samples/scheduling/date-picker/form/package.json
index f1a43f8a56..05fde8133f 100644
--- a/samples/scheduling/date-picker/form/package.json
+++ b/samples/scheduling/date-picker/form/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/date-picker/form/webpack.config.js b/samples/scheduling/date-picker/form/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/date-picker/form/webpack.config.js
+++ b/samples/scheduling/date-picker/form/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/date-picker/format/package.json b/samples/scheduling/date-picker/format/package.json
index 1540b6270a..798c481b11 100644
--- a/samples/scheduling/date-picker/format/package.json
+++ b/samples/scheduling/date-picker/format/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/date-picker/format/webpack.config.js b/samples/scheduling/date-picker/format/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/date-picker/format/webpack.config.js
+++ b/samples/scheduling/date-picker/format/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/date-picker/overview/package.json b/samples/scheduling/date-picker/overview/package.json
index cfa81ce356..f4e31363b1 100644
--- a/samples/scheduling/date-picker/overview/package.json
+++ b/samples/scheduling/date-picker/overview/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/date-picker/overview/webpack.config.js b/samples/scheduling/date-picker/overview/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/date-picker/overview/webpack.config.js
+++ b/samples/scheduling/date-picker/overview/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },
diff --git a/samples/scheduling/date-picker/styling/package.json b/samples/scheduling/date-picker/styling/package.json
index a67dc12627..4c4d6e9ba3 100644
--- a/samples/scheduling/date-picker/styling/package.json
+++ b/samples/scheduling/date-picker/styling/package.json
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.10.0",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
diff --git a/samples/scheduling/date-picker/styling/webpack.config.js b/samples/scheduling/date-picker/styling/webpack.config.js
index 9d11a6155c..3813144cf8 100644
--- a/samples/scheduling/date-picker/styling/webpack.config.js
+++ b/samples/scheduling/date-picker/styling/webpack.config.js
@@ -65,7 +65,8 @@ module.exports = env => {
                                 "compact": isProd ? true : false,
                                 "presets": presets,
                                 "plugins": [
-                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-class-static-block",
+                                    "@babel/plugin-transform-class-properties",
                                     "@babel/plugin-transform-runtime"
                                 ]
                             }
@@ -78,7 +79,8 @@ module.exports = env => {
                         "compact": isProd ? true : false,
                         "presets": presets,
                         "plugins": [
-                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-class-static-block",
+                            "@babel/plugin-transform-class-properties",
                             "@babel/plugin-transform-runtime"
                         ]
                     },