survey-analytics 2.5.14 → 3.0.0-beta.0

package/survey.analytics.tabulator.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.5.14
+ * surveyjs - SurveyJS Dashboard library v3.0.0-beta.0
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: SEE LICENSE IN LICENSE
  */
@@ -7,7 +7,7 @@
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("survey-core"), require("tabulator-tables"));
 	else if(typeof define === 'function' && define.amd)
-		define("SurveyAnalyticsTabulator", ["survey-core", "tabulator-tables"], factory);
+		define(["survey-core", "tabulator-tables"], factory);
 	else if(typeof exports === 'object')
 		exports["SurveyAnalyticsTabulator"] = factory(require("survey-core"), require("tabulator-tables"));
 	else
@@ -465,8 +465,10 @@ var englishStrings = {
     groupButton: "Group By Me",
     ungroupButton: "Ungroup By Me",
     selectButton: "Select Me",
+    columnReorder: "Column reorder",
     hideColumn: "Hide column",
     showColumn: "Show column",
+    columns: "Columns",
     makePrivateColumn: "Make column private",
     makePublicColumn: "Make column public",
     moveToDetail: "Move to Detail",
@@ -475,10 +477,12 @@ var englishStrings = {
     removeRows: "Remove rows",
     showLabel: "Show",
     entriesLabel: "entries",
+    entriesOnPageLabel: "Entries on Page:",
     visualizer_text: "Texts in table",
     visualizer_wordcloud: "Wordcloud",
     visualizer_histogram: "Histogram",
     visualizer_number: "Average",
+    visualizer_average: "Average",
     visualizer_choices: "Table",
     visualizer_selectBase: "Chart",
     visualizer_matrix: "Chart",
@@ -492,6 +496,9 @@ var englishStrings = {
     chartType_bullet: "Bullet",
     chartType_line: "Line",
     chartType_radar: "Radar",
+    chartType_histogram: "Histogram",
+    chartType_vhistogram: "Vertical Histogram",
+    chartType_stackedhistogram: "Stacked Histogram",
     hideButton: "Hide",
     makePrivateButton: "Make private",
     makePublicButton: "Make public",
@@ -501,18 +508,39 @@ var englishStrings = {
     changeLocale: "Change Locale",
     clearButton: "Clear",
     addElement: "Choose question to show...",
+    allQuestions: "All questions",
     defaultOrder: "Default Order",
     ascOrder: "Ascending",
     descOrder: "Descending",
     showMinorColumns: "Show minor columns",
     actionsColumn: "Actions",
     otherCommentTitle: "Other items and comments",
-    showPercentages: "Show percentages",
+    showPercentages: "Show %",
     hidePercentages: "Hide percentages",
+    exportAs: "Export As...",
     pdfDownloadCaption: "PDF",
     xlsxDownloadCaption: "Excel",
     csvDownloadCaption: "CSV",
     saveDiagramAsPNG: "Download plot as a PNG file",
+    responsesText: "response(s)",
+    noData: "No data",
+    selectDateRange: "Select date range...",
+    includeToday: "Include today",
+    reportingPeriodCustom: "Custom",
+    reportingPeriodLast7days: "Last 7 days",
+    reportingPeriodLast14days: "Last 14 days",
+    reportingPeriodLast28days: "Last 28 days",
+    reportingPeriodLast30days: "Last 30 days",
+    reportingPeriodLastWeekMon: "Last week (starts Monday)",
+    reportingPeriodLastWeekSun: "Last week (starts Sunday)",
+    reportingPeriodLastMonth: "Last month",
+    reportingPeriodLastQuarter: "Last quarter",
+    reportingPeriodLastYear: "Last year",
+    reportingPeriodWtdSun: "This week to date (starts Sunday)",
+    reportingPeriodWtdMon: "This week to date (starts Monday)",
+    reportingPeriodMtd: "This month to date",
+    reportingPeriodQtd: "This quarter to date",
+    reportingPeriodYtd: "This year to date",
     hideEmptyAnswers: "Hide empty answers",
     showEmptyAnswers: "Show empty answers",
     "topNValueText-1": "All answers",
@@ -3163,48 +3191,61 @@ var swedishStrings = {
 
 /***/ }),
 
-/***/ "./src/entries/tabulator.ts":
-/*!**********************************!*\
-  !*** ./src/entries/tabulator.ts ***!
-  \**********************************/
+/***/ "./src/entries/fonts.scss":
+/*!********************************!*\
+  !*** ./src/entries/fonts.scss ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
+/***/ "./src/entries/tabulator.fontless.ts":
+/*!*******************************************!*\
+  !*** ./src/entries/tabulator.fontless.ts ***!
+  \*******************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   BaseColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.BaseColumn),
-/* harmony export */   CheckboxColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.CheckboxColumn),
-/* harmony export */   CheckboxColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.CheckboxColumnsBuilder),
-/* harmony export */   ColumnsBuilderFactory: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.ColumnsBuilderFactory),
-/* harmony export */   CommentColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.CommentColumn),
-/* harmony export */   CompositeColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.CompositeColumnsBuilder),
-/* harmony export */   CompositeQuestionColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.CompositeQuestionColumn),
-/* harmony export */   CustomColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.CustomColumnsBuilder),
-/* harmony export */   CustomQuestionColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.CustomQuestionColumn),
-/* harmony export */   DefaultColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.DefaultColumn),
-/* harmony export */   DefaultColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.DefaultColumnsBuilder),
-/* harmony export */   DocumentHelper: () => (/* reexport safe */ _utils_index__WEBPACK_IMPORTED_MODULE_24__.DocumentHelper),
-/* harmony export */   FileColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.FileColumn),
-/* harmony export */   FileColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.FileColumnsBuilder),
-/* harmony export */   ImageColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.ImageColumn),
-/* harmony export */   ImageColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.ImageColumnsBuilder),
-/* harmony export */   MatrixColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.MatrixColumn),
-/* harmony export */   MatrixColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.MatrixColumnsBuilder),
-/* harmony export */   MatrixDropdownColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.MatrixDropdownColumn),
-/* harmony export */   MatrixDropdownColumnBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.MatrixDropdownColumnBuilder),
-/* harmony export */   OtherColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.OtherColumn),
-/* harmony export */   SelectBaseColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.SelectBaseColumn),
-/* harmony export */   SelectBaseColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.SelectBaseColumnsBuilder),
-/* harmony export */   SingleChoiceColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_22__.SingleChoiceColumn),
-/* harmony export */   SingleChoiceColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__.SingleChoiceColumnsBuilder),
-/* harmony export */   Table: () => (/* reexport safe */ _tables_table__WEBPACK_IMPORTED_MODULE_19__.Table),
-/* harmony export */   TableEvent: () => (/* reexport safe */ _tables_table__WEBPACK_IMPORTED_MODULE_19__.TableEvent),
-/* harmony export */   TableExtensions: () => (/* reexport safe */ _tables_extensions_tableextensions__WEBPACK_IMPORTED_MODULE_23__.TableExtensions),
-/* harmony export */   TableRow: () => (/* reexport safe */ _tables_table__WEBPACK_IMPORTED_MODULE_19__.TableRow),
-/* harmony export */   Tabulator: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_20__.Tabulator),
-/* harmony export */   TabulatorRow: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_20__.TabulatorRow),
-/* harmony export */   defaultDownloadOptions: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_20__.defaultDownloadOptions),
-/* harmony export */   defaultOptions: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_20__.defaultOptions),
+/* harmony export */   BaseColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.BaseColumn),
+/* harmony export */   CheckboxColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.CheckboxColumn),
+/* harmony export */   CheckboxColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.CheckboxColumnsBuilder),
+/* harmony export */   ColumnsBuilderFactory: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.ColumnsBuilderFactory),
+/* harmony export */   CommentColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.CommentColumn),
+/* harmony export */   CompositeColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.CompositeColumnsBuilder),
+/* harmony export */   CompositeQuestionColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.CompositeQuestionColumn),
+/* harmony export */   CustomColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.CustomColumnsBuilder),
+/* harmony export */   CustomQuestionColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.CustomQuestionColumn),
+/* harmony export */   DefaultColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.DefaultColumn),
+/* harmony export */   DefaultColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.DefaultColumnsBuilder),
+/* harmony export */   DocumentHelper: () => (/* reexport safe */ _utils_index__WEBPACK_IMPORTED_MODULE_25__.DocumentHelper),
+/* harmony export */   FileColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.FileColumn),
+/* harmony export */   FileColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.FileColumnsBuilder),
+/* harmony export */   ImageColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.ImageColumn),
+/* harmony export */   ImageColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.ImageColumnsBuilder),
+/* harmony export */   MatrixColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.MatrixColumn),
+/* harmony export */   MatrixColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.MatrixColumnsBuilder),
+/* harmony export */   MatrixDropdownColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.MatrixDropdownColumn),
+/* harmony export */   MatrixDropdownColumnBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.MatrixDropdownColumnBuilder),
+/* harmony export */   OtherColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.OtherColumn),
+/* harmony export */   SelectBaseColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.SelectBaseColumn),
+/* harmony export */   SelectBaseColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.SelectBaseColumnsBuilder),
+/* harmony export */   SingleChoiceColumn: () => (/* reexport safe */ _tables_columns__WEBPACK_IMPORTED_MODULE_23__.SingleChoiceColumn),
+/* harmony export */   SingleChoiceColumnsBuilder: () => (/* reexport safe */ _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__.SingleChoiceColumnsBuilder),
+/* harmony export */   Table: () => (/* reexport safe */ _tables_table__WEBPACK_IMPORTED_MODULE_20__.Table),
+/* harmony export */   TableEvent: () => (/* reexport safe */ _tables_table__WEBPACK_IMPORTED_MODULE_20__.TableEvent),
+/* harmony export */   TableExtensions: () => (/* reexport safe */ _tables_extensions_tableextensions__WEBPACK_IMPORTED_MODULE_24__.TableExtensions),
+/* harmony export */   TableRow: () => (/* reexport safe */ _tables_table__WEBPACK_IMPORTED_MODULE_20__.TableRow),
+/* harmony export */   Tabulator: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_21__.Tabulator),
+/* harmony export */   TabulatorRow: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_21__.TabulatorRow),
+/* harmony export */   defaultDownloadOptions: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_21__.defaultDownloadOptions),
+/* harmony export */   defaultOptions: () => (/* reexport safe */ _tables_tabulator__WEBPACK_IMPORTED_MODULE_21__.defaultOptions),
 /* harmony export */   localization: () => (/* reexport safe */ _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization),
 /* harmony export */   setupLocale: () => (/* reexport safe */ _localizationManager__WEBPACK_IMPORTED_MODULE_0__.setupLocale),
 /* harmony export */   surveyStrings: () => (/* reexport safe */ _localizationManager__WEBPACK_IMPORTED_MODULE_0__.surveyStrings)
@@ -3226,14 +3267,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _analytics_localization_swedish__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../analytics-localization/swedish */ "./src/analytics-localization/swedish.ts");
 /* harmony import */ var _tables_extensions_rowextensions__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../tables/extensions/rowextensions */ "./src/tables/extensions/rowextensions.ts");
 /* harmony import */ var _tables_extensions_headerextensions__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../tables/extensions/headerextensions */ "./src/tables/extensions/headerextensions.ts");
-/* harmony import */ var _tables_extensions_columnextensions__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../tables/extensions/columnextensions */ "./src/tables/extensions/columnextensions.ts");
-/* harmony import */ var _tables_extensions_detailsextensions__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../tables/extensions/detailsextensions */ "./src/tables/extensions/detailsextensions.ts");
-/* harmony import */ var _tables_table__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../tables/table */ "./src/tables/table.ts");
-/* harmony import */ var _tables_tabulator__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../tables/tabulator */ "./src/tables/tabulator.ts");
-/* harmony import */ var _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../tables/columnbuilder */ "./src/tables/columnbuilder.ts");
-/* harmony import */ var _tables_columns__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../tables/columns */ "./src/tables/columns.ts");
-/* harmony import */ var _tables_extensions_tableextensions__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../tables/extensions/tableextensions */ "./src/tables/extensions/tableextensions.ts");
-/* harmony import */ var _utils_index__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../utils/index */ "./src/utils/index.ts");
+/* harmony import */ var _tables_extensions_footerextensions__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../tables/extensions/footerextensions */ "./src/tables/extensions/footerextensions.ts");
+/* harmony import */ var _tables_extensions_columnextensions__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../tables/extensions/columnextensions */ "./src/tables/extensions/columnextensions.ts");
+/* harmony import */ var _tables_extensions_detailsextensions__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../tables/extensions/detailsextensions */ "./src/tables/extensions/detailsextensions.ts");
+/* harmony import */ var _tables_table__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../tables/table */ "./src/tables/table.ts");
+/* harmony import */ var _tables_tabulator__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../tables/tabulator */ "./src/tables/tabulator.ts");
+/* harmony import */ var _tables_columnbuilder__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../tables/columnbuilder */ "./src/tables/columnbuilder.ts");
+/* harmony import */ var _tables_columns__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../tables/columns */ "./src/tables/columns.ts");
+/* harmony import */ var _tables_extensions_tableextensions__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../tables/extensions/tableextensions */ "./src/tables/extensions/tableextensions.ts");
+/* harmony import */ var _utils_index__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../utils/index */ "./src/utils/index.ts");
 
 //localization
 
@@ -3263,6 +3305,61 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+/***/ }),
+
+/***/ "./src/entries/tabulator.ts":
+/*!**********************************!*\
+  !*** ./src/entries/tabulator.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   BaseColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.BaseColumn),
+/* harmony export */   CheckboxColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CheckboxColumn),
+/* harmony export */   CheckboxColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CheckboxColumnsBuilder),
+/* harmony export */   ColumnsBuilderFactory: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.ColumnsBuilderFactory),
+/* harmony export */   CommentColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CommentColumn),
+/* harmony export */   CompositeColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CompositeColumnsBuilder),
+/* harmony export */   CompositeQuestionColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CompositeQuestionColumn),
+/* harmony export */   CustomColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CustomColumnsBuilder),
+/* harmony export */   CustomQuestionColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.CustomQuestionColumn),
+/* harmony export */   DefaultColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.DefaultColumn),
+/* harmony export */   DefaultColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.DefaultColumnsBuilder),
+/* harmony export */   DocumentHelper: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper),
+/* harmony export */   FileColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.FileColumn),
+/* harmony export */   FileColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.FileColumnsBuilder),
+/* harmony export */   ImageColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.ImageColumn),
+/* harmony export */   ImageColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.ImageColumnsBuilder),
+/* harmony export */   MatrixColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.MatrixColumn),
+/* harmony export */   MatrixColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.MatrixColumnsBuilder),
+/* harmony export */   MatrixDropdownColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.MatrixDropdownColumn),
+/* harmony export */   MatrixDropdownColumnBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.MatrixDropdownColumnBuilder),
+/* harmony export */   OtherColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.OtherColumn),
+/* harmony export */   SelectBaseColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.SelectBaseColumn),
+/* harmony export */   SelectBaseColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.SelectBaseColumnsBuilder),
+/* harmony export */   SingleChoiceColumn: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.SingleChoiceColumn),
+/* harmony export */   SingleChoiceColumnsBuilder: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.SingleChoiceColumnsBuilder),
+/* harmony export */   Table: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.Table),
+/* harmony export */   TableEvent: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.TableEvent),
+/* harmony export */   TableExtensions: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.TableExtensions),
+/* harmony export */   TableRow: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.TableRow),
+/* harmony export */   Tabulator: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.Tabulator),
+/* harmony export */   TabulatorRow: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.TabulatorRow),
+/* harmony export */   defaultDownloadOptions: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.defaultDownloadOptions),
+/* harmony export */   defaultOptions: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.defaultOptions),
+/* harmony export */   localization: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.localization),
+/* harmony export */   setupLocale: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.setupLocale),
+/* harmony export */   surveyStrings: () => (/* reexport safe */ _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__.surveyStrings)
+/* harmony export */ });
+/* harmony import */ var _tabulator_fontless__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./tabulator.fontless */ "./src/entries/tabulator.fontless.ts");
+/* harmony import */ var _fonts_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fonts.scss */ "./src/entries/fonts.scss");
+
+
+
+
 /***/ }),
 
 /***/ "./src/icons.ts":
@@ -3295,14 +3392,30 @@ function getIconsData(path) {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var map = {
+	"./cancel_24x24.svg": "./src/images/cancel_24x24.svg",
+	"./check-16x16.svg": "./src/images/check-16x16.svg",
+	"./check-24x24.svg": "./src/images/check-24x24.svg",
+	"./chevrondown-24x24.svg": "./src/images/chevrondown-24x24.svg",
+	"./close-16x16.svg": "./src/images/close-16x16.svg",
+	"./close-24x24.svg": "./src/images/close-24x24.svg",
 	"./detail.svg": "./src/images/detail.svg",
+	"./drag-24x24.svg": "./src/images/drag-24x24.svg",
 	"./drag.svg": "./src/images/drag.svg",
+	"./draghorizontal-24x16.svg": "./src/images/draghorizontal-24x16.svg",
 	"./hide.svg": "./src/images/hide.svg",
+	"./invisible-24x24.svg": "./src/images/invisible-24x24.svg",
 	"./makeprivate.svg": "./src/images/makeprivate.svg",
 	"./makepublic.svg": "./src/images/makepublic.svg",
+	"./more-24x24.svg": "./src/images/more-24x24.svg",
 	"./moveToDetails.svg": "./src/images/moveToDetails.svg",
+	"./moveToHorizontal-24x24.svg": "./src/images/moveToHorizontal-24x24.svg",
+	"./moveToVertical-24x24.svg": "./src/images/moveToVertical-24x24.svg",
 	"./nonCommercial.svg": "./src/images/nonCommercial.svg",
-	"./sorting.svg": "./src/images/sorting.svg"
+	"./redo-24x24.svg": "./src/images/redo-24x24.svg",
+	"./reorder-24x24.svg": "./src/images/reorder-24x24.svg",
+	"./search-24x24.svg": "./src/images/search-24x24.svg",
+	"./sorting.svg": "./src/images/sorting.svg",
+	"./warning-24x24.svg": "./src/images/warning-24x24.svg"
 };
 
 
@@ -3327,6 +3440,66 @@ webpackContext.id = "./src/images sync recursive \\.svg$";
 
 /***/ }),
 
+/***/ "./src/images/cancel_24x24.svg":
+/*!*************************************!*\
+  !*** ./src/images/cancel_24x24.svg ***!
+  \*************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8099 11.7499L15.2799 9.27994C15.5699 8.98994 15.5699 8.50994 15.2799 8.21994C14.9899 7.92994 14.5099 7.92994 14.2199 8.21994L11.7499 10.6899L9.27994 8.21994C8.98994 7.92994 8.50994 7.92994 8.21994 8.21994C7.92994 8.50994 7.92994 8.98994 8.21994 9.27994L10.6899 11.7499L8.21994 14.2199C7.92994 14.5099 7.92994 14.9899 8.21994 15.2799C8.36994 15.4299 8.55994 15.4999 8.74994 15.4999C8.93994 15.4999 9.12994 15.4299 9.27994 15.2799L11.7499 12.8099L14.2199 15.2799C14.3699 15.4299 14.5599 15.4999 14.7499 15.4999C14.9399 15.4999 15.1299 15.4299 15.2799 15.2799C15.5699 14.9899 15.5699 14.5099 15.2799 14.2199L12.8099 11.7499Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/check-16x16.svg":
+/*!************************************!*\
+  !*** ./src/images/check-16x16.svg ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M14.0275 5.0275L6.5275 12.5275C6.3775 12.6775 6.1875 12.7475 5.9975 12.7475C5.8075 12.7475 5.6175 12.6775 5.4675 12.5275L2.4675 9.5275C2.1775 9.2375 2.1775 8.7575 2.4675 8.4675C2.7575 8.1775 3.2375 8.1775 3.5275 8.4675L5.9975 10.9375L12.9675 3.9675C13.2575 3.6775 13.7375 3.6775 14.0275 3.9675C14.3175 4.2575 14.3175 4.7375 14.0275 5.0275Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/check-24x24.svg":
+/*!************************************!*\
+  !*** ./src/images/check-24x24.svg ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19.5275 7.5275L9.5275 17.5275C9.3775 17.6775 9.1875 17.7475 8.9975 17.7475C8.8075 17.7475 8.6175 17.6775 8.4675 17.5275L4.4675 13.5275C4.1775 13.2375 4.1775 12.7575 4.4675 12.4675C4.7575 12.1775 5.2375 12.1775 5.5275 12.4675L8.9975 15.9375L18.4675 6.4675C18.7575 6.1775 19.2375 6.1775 19.5275 6.4675C19.8175 6.7575 19.8175 7.2375 19.5275 7.5275Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/chevrondown-24x24.svg":
+/*!******************************************!*\
+  !*** ./src/images/chevrondown-24x24.svg ***!
+  \******************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.5275 10.5275L12.5275 14.5275C12.3775 14.6775 12.1875 14.7475 11.9975 14.7475C11.8075 14.7475 11.6175 14.6775 11.4675 14.5275L7.4675 10.5275C7.1775 10.2375 7.1775 9.7575 7.4675 9.4675C7.7575 9.1775 8.2375 9.1775 8.5275 9.4675L11.9975 12.9375L15.4675 9.4675C15.7575 9.1775 16.2375 9.1775 16.5275 9.4675C16.8175 9.7575 16.8175 10.2375 16.5275 10.5275Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/close-16x16.svg":
+/*!************************************!*\
+  !*** ./src/images/close-16x16.svg ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M13.5275 12.4675C13.8175 12.7575 13.8175 13.2375 13.5275 13.5275C13.3775 13.6775 13.1875 13.7475 12.9975 13.7475C12.8075 13.7475 12.6175 13.6775 12.4675 13.5275L7.9975 9.0575L3.5275 13.5275C3.3775 13.6775 3.1875 13.7475 2.9975 13.7475C2.8075 13.7475 2.6175 13.6775 2.4675 13.5275C2.1775 13.2375 2.1775 12.7575 2.4675 12.4675L6.9375 7.9975L2.4675 3.5275C2.1775 3.2375 2.1775 2.7575 2.4675 2.4675C2.7575 2.1775 3.2375 2.1775 3.5275 2.4675L7.9975 6.9375L12.4675 2.4675C12.7575 2.1775 13.2375 2.1775 13.5275 2.4675C13.8175 2.7575 13.8175 3.2375 13.5275 3.5275L9.0575 7.9975L13.5275 12.4675Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/close-24x24.svg":
+/*!************************************!*\
+  !*** ./src/images/close-24x24.svg ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19.5275 18.4675C19.8175 18.7575 19.8175 19.2375 19.5275 19.5275C19.3775 19.6775 19.1875 19.7475 18.9975 19.7475C18.8075 19.7475 18.6175 19.6775 18.4675 19.5275L11.9975 13.0575L5.5275 19.5275C5.3775 19.6775 5.1875 19.7475 4.9975 19.7475C4.8075 19.7475 4.6175 19.6775 4.4675 19.5275C4.1775 19.2375 4.1775 18.7575 4.4675 18.4675L10.9375 11.9975L4.4675 5.5275C4.1775 5.2375 4.1775 4.7575 4.4675 4.4675C4.7575 4.1775 5.2375 4.1775 5.5275 4.4675L11.9975 10.9375L18.4675 4.4675C18.7575 4.1775 19.2375 4.1775 19.5275 4.4675C19.8175 4.7575 19.8175 5.2375 19.5275 5.5275L13.0575 11.9975L19.5275 18.4675Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/detail.svg":
 /*!*******************************!*\
   !*** ./src/images/detail.svg ***!
@@ -3337,6 +3510,16 @@ module.exports = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" view
 
 /***/ }),
 
+/***/ "./src/images/drag-24x24.svg":
+/*!***********************************!*\
+  !*** ./src/images/drag-24x24.svg ***!
+  \***********************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.4678 7.47026C16.7578 7.18035 17.2374 7.18029 17.5273 7.47026L21.5273 11.4703C21.5972 11.5401 21.6476 11.6197 21.6875 11.7095C21.7675 11.8895 21.7674 12.0999 21.6875 12.2798C21.6475 12.3698 21.5973 12.4501 21.5273 12.5201L17.5273 16.5201V16.5298C17.2374 16.8198 16.7578 16.8197 16.4678 16.5298C16.3178 16.3798 16.2471 16.1896 16.2471 15.9996C16.2472 15.8097 16.3179 15.6201 16.4678 15.4703L19.1875 12.7496H4.80762L7.52734 15.4703C7.81734 15.7603 7.81734 16.2398 7.52734 16.5298C7.23733 16.8197 6.75772 16.8198 6.46777 16.5298L2.46777 12.5298C2.39782 12.4599 2.3476 12.3796 2.30762 12.2896C2.26773 12.1997 2.24805 12.0994 2.24805 11.9996C2.2481 11.8997 2.26767 11.7994 2.30762 11.7095C2.34756 11.6197 2.39794 11.5401 2.46777 11.4703L6.46777 7.47026C6.75774 7.18029 7.23733 7.18035 7.52734 7.47026C7.81734 7.76026 7.81734 8.23983 7.52734 8.52983L4.80762 11.2496H19.1875L16.4678 8.52983C16.1778 8.23983 16.1778 7.76026 16.4678 7.47026Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/drag.svg":
 /*!*****************************!*\
   !*** ./src/images/drag.svg ***!
@@ -3347,6 +3530,16 @@ module.exports = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" view
 
 /***/ }),
 
+/***/ "./src/images/draghorizontal-24x16.svg":
+/*!*********************************************!*\
+  !*** ./src/images/draghorizontal-24x16.svg ***!
+  \*********************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 16\"><path d=\"M17.5 9.25C16.81 9.25 16.25 9.81 16.25 10.5C16.25 11.19 16.81 11.75 17.5 11.75C18.19 11.75 18.75 11.19 18.75 10.5C18.75 9.81 18.19 9.25 17.5 9.25ZM17.25 10.5C17.25 10.36 17.36 10.25 17.5 10.25C17.64 10.25 17.75 10.36 17.75 10.5C17.75 10.78 17.25 10.78 17.25 10.5ZM17.5 6.75C18.19 6.75 18.75 6.19 18.75 5.5C18.75 4.81 18.19 4.25 17.5 4.25C16.81 4.25 16.25 4.81 16.25 5.5C16.25 6.19 16.81 6.75 17.5 6.75ZM17.5 5.25C17.64 5.25 17.75 5.36 17.75 5.5C17.75 5.78 17.25 5.78 17.25 5.5C17.25 5.36 17.36 5.25 17.5 5.25ZM12.5 9.25C11.81 9.25 11.25 9.81 11.25 10.5C11.25 11.19 11.81 11.75 12.5 11.75C13.19 11.75 13.75 11.19 13.75 10.5C13.75 9.81 13.19 9.25 12.5 9.25ZM12.25 10.5C12.25 10.36 12.36 10.25 12.5 10.25C12.64 10.25 12.75 10.36 12.75 10.5C12.75 10.78 12.25 10.78 12.25 10.5ZM12.5 4.25C11.81 4.25 11.25 4.81 11.25 5.5C11.25 6.19 11.81 6.75 12.5 6.75C13.19 6.75 13.75 6.19 13.75 5.5C13.75 4.81 13.19 4.25 12.5 4.25ZM12.25 5.5C12.25 5.36 12.36 5.25 12.5 5.25C12.64 5.25 12.75 5.36 12.75 5.5C12.75 5.78 12.25 5.78 12.25 5.5ZM7.5 9.25C6.81 9.25 6.25 9.81 6.25 10.5C6.25 11.19 6.81 11.75 7.5 11.75C8.19 11.75 8.75 11.19 8.75 10.5C8.75 9.81 8.19 9.25 7.5 9.25ZM7.25 10.5C7.25 10.36 7.36 10.25 7.5 10.25C7.64 10.25 7.75 10.36 7.75 10.5C7.75 10.78 7.25 10.78 7.25 10.5ZM7.5 4.25C6.81 4.25 6.25 4.81 6.25 5.5C6.25 6.19 6.81 6.75 7.5 6.75C8.19 6.75 8.75 6.19 8.75 5.5C8.75 4.81 8.19 4.25 7.5 4.25ZM7.25 5.5C7.25 5.36 7.36 5.25 7.5 5.25C7.64 5.25 7.75 5.36 7.75 5.5C7.75 5.78 7.25 5.78 7.25 5.5Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/hide.svg":
 /*!*****************************!*\
   !*** ./src/images/hide.svg ***!
@@ -3357,6 +3550,16 @@ module.exports = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" view
 
 /***/ }),
 
+/***/ "./src/images/invisible-24x24.svg":
+/*!****************************************!*\
+  !*** ./src/images/invisible-24x24.svg ***!
+  \****************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M20.4449 14.3969C20.7749 14.6469 20.8449 15.1169 20.5949 15.4469C18.5349 18.1769 15.4049 19.7469 11.9949 19.7469C11.3849 19.7469 10.7349 19.6769 10.0149 19.5469C9.60488 19.4669 9.33488 19.0769 9.41488 18.6669C9.49488 18.2569 9.88488 17.9869 10.2949 18.0669C10.9249 18.1869 11.4749 18.2369 11.9949 18.2369C14.9249 18.2369 17.6249 16.8869 19.3949 14.5369C19.6449 14.2069 20.1149 14.1369 20.4449 14.3869V14.3969ZM5.97488 17.7169C6.20488 17.7169 6.42488 17.6169 6.57488 17.4169C6.82488 17.0869 6.76488 16.6169 6.42488 16.3669C5.70488 15.8169 5.08488 15.2069 4.58488 14.5469C4.33488 14.2169 3.86488 14.1469 3.53488 14.3969C3.20488 14.6469 3.13488 15.1169 3.38488 15.4469C3.96488 16.2169 4.68488 16.9269 5.51488 17.5569C5.64488 17.6569 5.80488 17.7069 5.96488 17.7069L5.97488 17.7169ZM11.9649 8.74692C12.3749 8.74692 12.7149 8.40692 12.7049 7.98692C12.6949 7.56692 12.3449 7.21692 11.9449 7.24692C9.35488 7.27692 7.24488 9.40692 7.24488 11.9969C7.24488 12.6069 7.36488 13.2069 7.59488 13.7769C7.71488 14.0669 7.99488 14.2469 8.29488 14.2469C8.38488 14.2469 8.48488 14.2269 8.57488 14.1969C8.95488 14.0369 9.14488 13.6069 8.98488 13.2169C8.82488 12.8269 8.74488 12.4169 8.74488 11.9969C8.74488 10.2269 10.1849 8.76692 11.9649 8.74692ZM12.0249 15.2469C11.6149 15.2469 11.2749 15.5869 11.2849 16.0069C11.2849 16.4169 11.6249 16.7469 12.0349 16.7469C14.6249 16.7169 16.7349 14.5869 16.7349 11.9969C16.7349 11.3869 16.6149 10.7869 16.3849 10.2169C16.2249 9.83692 15.7849 9.64692 15.4049 9.80692C15.0249 9.96692 14.8349 10.3969 14.9949 10.7869C15.1549 11.1769 15.2349 11.5869 15.2349 12.0069C15.2349 13.7769 13.7949 15.2369 12.0149 15.2569L12.0249 15.2469ZM23.6549 11.6469C22.4449 9.34692 20.6849 7.44692 18.5649 6.13692C18.2049 5.91692 17.7449 6.02692 17.5349 6.38692C17.3149 6.73692 17.4249 7.19692 17.7849 7.41692C19.6749 8.57692 21.2449 10.2869 22.3249 12.3469C22.4549 12.5969 22.7249 12.7469 22.9949 12.7469C23.1149 12.7469 23.2349 12.7169 23.3449 12.6569C23.7149 12.4669 23.8549 12.0069 23.6549 11.6469ZM11.9949 5.74692C12.5649 5.74692 13.1449 5.79692 13.7349 5.88692C14.1449 5.94692 14.5249 5.67692 14.5949 5.26692C14.6649 4.85692 14.3849 4.47692 13.9749 4.40692C8.38488 3.49692 3.05488 6.46692 0.334879 11.6469C0.144879 12.0169 0.284879 12.4669 0.644879 12.6569C0.754879 12.7169 0.874879 12.7469 0.994879 12.7469C1.26488 12.7469 1.52488 12.5969 1.66488 12.3469C3.79488 8.27692 7.76488 5.74692 11.9949 5.74692ZM18.4149 2.37692C18.0649 2.14692 17.6049 2.23692 17.3749 2.58692L5.37488 20.5769C5.14488 20.9169 5.23488 21.3869 5.58488 21.6169C5.71488 21.6969 5.85488 21.7469 6.00488 21.7469C6.24488 21.7469 6.48488 21.6269 6.62488 21.4169L18.6149 3.41692C18.8449 3.07692 18.7549 2.60692 18.4049 2.37692H18.4149Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/makeprivate.svg":
 /*!************************************!*\
   !*** ./src/images/makeprivate.svg ***!
@@ -3377,6 +3580,16 @@ module.exports = "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/
 
 /***/ }),
 
+/***/ "./src/images/more-24x24.svg":
+/*!***********************************!*\
+  !*** ./src/images/more-24x24.svg ***!
+  \***********************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 10.25C11.04 10.25 10.25 11.04 10.25 12C10.25 12.96 11.04 13.75 12 13.75C12.96 13.75 13.75 12.96 13.75 12C13.75 11.04 12.96 10.25 12 10.25ZM11.75 12C11.75 11.86 11.86 11.75 12 11.75C12.14 11.75 12.25 11.86 12.25 12C12.25 12.28 11.75 12.28 11.75 12ZM19 10.25C18.04 10.25 17.25 11.04 17.25 12C17.25 12.96 18.04 13.75 19 13.75C19.96 13.75 20.75 12.96 20.75 12C20.75 11.04 19.96 10.25 19 10.25ZM18.75 12C18.75 11.86 18.86 11.75 19 11.75C19.14 11.75 19.25 11.86 19.25 12C19.25 12.28 18.75 12.28 18.75 12ZM5 10.25C4.04 10.25 3.25 11.04 3.25 12C3.25 12.96 4.04 13.75 5 13.75C5.96 13.75 6.75 12.96 6.75 12C6.75 11.04 5.96 10.25 5 10.25ZM4.75 12C4.75 11.86 4.86 11.75 5 11.75C5.14 11.75 5.25 11.86 5.25 12C5.25 12.28 4.75 12.28 4.75 12Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/moveToDetails.svg":
 /*!**************************************!*\
   !*** ./src/images/moveToDetails.svg ***!
@@ -3387,6 +3600,26 @@ module.exports = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" view
 
 /***/ }),
 
+/***/ "./src/images/moveToHorizontal-24x24.svg":
+/*!***********************************************!*\
+  !*** ./src/images/moveToHorizontal-24x24.svg ***!
+  \***********************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.8999 17.25C21.4246 17.25 21.8501 17.6755 21.8501 18.2002V20.7998C21.8501 21.3245 21.4246 21.75 20.8999 21.75H8.30029C7.77562 21.75 7.3501 21.3245 7.3501 20.7998V18.2002C7.3501 17.6755 7.77562 17.25 8.30029 17.25H20.8999ZM8.8501 18.75V20.25H20.3501V18.75H8.8501Z\"></path><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.8999 2.25C6.42457 2.25 6.8501 2.67552 6.8501 3.2002V15.7998C6.8501 16.3245 6.42457 16.75 5.8999 16.75H3.30029C2.77562 16.75 2.3501 16.3245 2.3501 15.7998V3.2002C2.3501 2.70843 2.72375 2.30368 3.20264 2.25488L3.30029 2.25H5.8999ZM3.8501 15.25H5.3501V3.75H3.8501V15.25Z\"></path><path d=\"M11.1011 4.25C13.5283 4.25011 15.472 4.76427 16.6616 6.44141C17.5761 7.73122 17.9475 9.59006 17.9292 12.0908L19.0396 10.9648C19.3304 10.6703 19.8053 10.6674 20.1001 10.958C20.395 11.2489 20.3978 11.7237 20.1069 12.0186L17.6343 14.5264C17.6284 14.5323 17.6208 14.5363 17.6147 14.542C17.5947 14.561 17.5733 14.578 17.5513 14.5947C17.5337 14.6081 17.5162 14.6211 17.4976 14.6328C17.4758 14.6465 17.4533 14.6585 17.4302 14.6699C17.4093 14.6802 17.3884 14.6899 17.3667 14.6982C17.3422 14.7076 17.3171 14.7149 17.2915 14.7217C17.2711 14.7271 17.2509 14.7326 17.23 14.7363C17.1897 14.7434 17.1489 14.7487 17.1069 14.749L17.104 14.75C17.1014 14.75 17.0988 14.749 17.0962 14.749C17.08 14.7489 17.0637 14.7492 17.0474 14.748C17.0173 14.7459 16.9874 14.7419 16.9585 14.7363C16.9562 14.7359 16.954 14.7348 16.9517 14.7344C16.9144 14.7269 16.8791 14.7149 16.8442 14.7021C16.828 14.6962 16.8122 14.6897 16.7964 14.6826C16.7679 14.6699 16.7408 14.6556 16.7144 14.6396C16.6986 14.6301 16.6826 14.6211 16.6675 14.6104C16.6434 14.5932 16.621 14.5744 16.5991 14.5547C16.5901 14.5466 16.5794 14.5398 16.5708 14.5312L14.0679 12.0391C13.7747 11.7468 13.7729 11.2719 14.0649 10.9785C14.3572 10.685 14.8329 10.6843 15.1265 10.9766L16.4263 12.2695C16.4639 9.79326 16.1085 8.25411 15.438 7.30859C14.6774 6.23635 13.3707 5.75003 11.1001 5.75C10.6862 5.74979 10.3503 5.41395 10.3501 5C10.3503 4.58596 10.687 4.25 11.1011 4.25Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/moveToVertical-24x24.svg":
+/*!*********************************************!*\
+  !*** ./src/images/moveToVertical-24x24.svg ***!
+  \*********************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.7998 17.25C16.3245 17.25 16.75 17.6755 16.75 18.2002V20.7998C16.75 21.3245 16.3245 21.75 15.7998 21.75H3.2002C2.67553 21.75 2.25 21.3245 2.25 20.7998V18.2002C2.25 17.6755 2.67552 17.25 3.2002 17.25H15.7998ZM3.75 20.25H15.25V18.75H3.75V20.25Z\"></path><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.8975 2.25488C21.3763 2.30368 21.75 2.70843 21.75 3.2002V15.7998C21.75 16.3245 21.3245 16.75 20.7998 16.75H18.2002C17.6755 16.75 17.25 16.3245 17.25 15.7998V3.2002C17.25 2.67552 17.6755 2.25 18.2002 2.25H20.7998L20.8975 2.25488ZM18.75 15.25H20.25V3.75H18.75V15.25Z\"></path><path d=\"M10.5645 4.39355C10.8553 4.09865 11.3301 4.09585 11.625 4.38672L14.1328 6.85938C14.1386 6.86506 14.1429 6.87208 14.1484 6.87793C14.1675 6.89794 14.1844 6.91943 14.2012 6.94141C14.2148 6.95936 14.2283 6.97707 14.2402 6.99609C14.2529 7.01624 14.2637 7.03725 14.2744 7.05859C14.2861 7.082 14.2974 7.10538 14.3066 7.12988C14.3142 7.14993 14.3193 7.17062 14.3252 7.19141C14.3324 7.21693 14.3393 7.2423 14.3438 7.26855C14.3502 7.30662 14.3551 7.34515 14.3555 7.38477L14.3564 7.38965C14.3565 7.39193 14.3555 7.3942 14.3555 7.39648C14.3554 7.41299 14.3557 7.42958 14.3545 7.44629C14.3496 7.51411 14.3329 7.57836 14.3115 7.63965C14.3041 7.66085 14.2964 7.6817 14.2871 7.70215C14.2759 7.72691 14.2628 7.75024 14.249 7.77344C14.2382 7.79174 14.2273 7.80977 14.2148 7.82715C14.198 7.85065 14.1795 7.87222 14.1602 7.89355C14.1521 7.90246 14.1462 7.91332 14.1377 7.92188L11.6465 10.4248C11.3542 10.7183 10.8785 10.72 10.585 10.4277C10.2919 10.1355 10.2911 9.66061 10.583 9.36719L11.876 8.06641C9.39971 8.02875 7.86055 8.38514 6.91504 9.05566C5.84282 9.81626 5.35647 11.1229 5.35645 13.3936C5.3562 13.8075 5.02038 14.1434 4.60645 14.1436C4.1924 14.1434 3.85645 13.8067 3.85645 13.3926C3.85654 10.9653 4.3707 9.02164 6.04785 7.83203C7.33783 6.9174 9.19697 6.54607 11.6982 6.56445L10.5723 5.4541C10.2777 5.16333 10.274 4.68841 10.5645 4.39355Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/nonCommercial.svg":
 /*!**************************************!*\
   !*** ./src/images/nonCommercial.svg ***!
@@ -3397,6 +3630,36 @@ module.exports = "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/
 
 /***/ }),
 
+/***/ "./src/images/redo-24x24.svg":
+/*!***********************************!*\
+  !*** ./src/images/redo-24x24.svg ***!
+  \***********************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M21.7067 11.2425C21.7067 11.2425 21.6867 11.2725 21.6767 11.2925C21.6767 11.3125 21.6767 11.3225 21.6667 11.3425C21.6567 11.3725 21.6267 11.3925 21.6067 11.4125C21.5767 11.4525 21.5467 11.4925 21.5167 11.5325C21.4867 11.5625 21.4467 11.5925 21.4067 11.6225C21.3767 11.6425 21.3567 11.6625 21.3367 11.6825L15.3067 14.6825C15.1967 14.7325 15.0867 14.7625 14.9767 14.7625C14.6967 14.7625 14.4367 14.6125 14.3067 14.3425C14.1267 13.9725 14.2767 13.5225 14.6467 13.3325L19.2767 11.0325C13.7467 8.64247 8.45669 8.45247 6.06669 10.6625C4.07669 12.5025 4.72669 15.5225 5.61669 17.7325C5.76669 18.1125 5.58669 18.5525 5.19669 18.7125C5.10669 18.7525 5.00669 18.7625 4.91669 18.7625C4.61669 18.7625 4.33669 18.5825 4.21669 18.2925C2.27669 13.4825 3.58669 10.8825 5.03669 9.55247C7.81669 6.98247 13.4167 7.00247 19.3767 9.45247L17.3067 5.34247C17.1167 4.97247 17.2667 4.52247 17.6367 4.33247C18.0067 4.14247 18.4567 4.29247 18.6467 4.66247L21.6667 10.6625C21.6667 10.6625 21.6667 10.6925 21.6767 10.7125C21.6967 10.7625 21.7067 10.8125 21.7167 10.8625C21.7167 10.9025 21.7367 10.9525 21.7367 10.9925C21.7367 11.0425 21.7367 11.0925 21.7167 11.1425C21.7167 11.1725 21.7167 11.2125 21.7067 11.2425Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/reorder-24x24.svg":
+/*!**************************************!*\
+  !*** ./src/images/reorder-24x24.svg ***!
+  \**************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M8.9444 10.75H15.0544C15.7144 10.75 16.3144 10.39 16.6144 9.80002C16.9144 9.22002 16.8644 8.52002 16.4844 7.98002L13.4244 3.71002C12.7644 2.79002 11.2344 2.79002 10.5744 3.71002L7.5244 7.99002C7.1444 8.53002 7.0944 9.22002 7.3944 9.81002C7.6944 10.4 8.2944 10.76 8.9544 10.76L8.9444 10.75ZM8.7444 8.86002L11.7944 4.58002C11.8644 4.49002 11.9544 4.48002 11.9944 4.48002C12.0344 4.48002 12.1344 4.49002 12.1944 4.58002L15.2544 8.86002C15.3344 8.97002 15.3044 9.07002 15.2744 9.12002C15.2444 9.17002 15.1844 9.26002 15.0544 9.26002H8.9444C8.8144 9.26002 8.7444 9.18002 8.7244 9.12002C8.7044 9.06002 8.6644 8.97002 8.7444 8.86002ZM15.0544 13.25H8.9444C8.2844 13.25 7.6844 13.61 7.3844 14.2C7.0844 14.78 7.1344 15.48 7.5144 16.02L10.5744 20.3C10.9044 20.76 11.4344 21.03 11.9944 21.03C12.5544 21.03 13.0944 20.76 13.4144 20.3L16.4744 16.02C16.8544 15.48 16.9044 14.79 16.6044 14.2C16.3044 13.61 15.7044 13.25 15.0444 13.25H15.0544ZM15.2644 15.15L12.2044 19.43C12.0744 19.61 11.9244 19.61 11.7944 19.43L8.7344 15.15C8.6544 15.04 8.6844 14.94 8.7144 14.89C8.7444 14.84 8.8044 14.75 8.9344 14.75H15.0444C15.1744 14.75 15.2444 14.83 15.2644 14.89C15.2844 14.95 15.3244 15.04 15.2444 15.15H15.2644Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/search-24x24.svg":
+/*!*************************************!*\
+  !*** ./src/images/search-24x24.svg ***!
+  \*************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.9975 2.25C9.7275 2.25 6.2475 5.73 6.2475 10C6.2475 11.87 6.9075 13.58 8.0175 14.92L2.4675 20.47C2.1775 20.76 2.1775 21.24 2.4675 21.53C2.6175 21.68 2.8075 21.75 2.9975 21.75C3.1875 21.75 3.3775 21.68 3.5275 21.53L9.0775 15.98C10.4175 17.08 12.1275 17.75 13.9975 17.75C18.2675 17.75 21.7475 14.27 21.7475 10C21.7475 5.73 18.2675 2.25 13.9975 2.25ZM13.9975 16.25C10.5475 16.25 7.7475 13.45 7.7475 10C7.7475 6.55 10.5475 3.75 13.9975 3.75C17.4475 3.75 20.2475 6.55 20.2475 10C20.2475 13.45 17.4475 16.25 13.9975 16.25Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/sorting.svg":
 /*!********************************!*\
   !*** ./src/images/sorting.svg ***!
@@ -3407,6 +3670,16 @@ module.exports = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" view
 
 /***/ }),
 
+/***/ "./src/images/warning-24x24.svg":
+/*!**************************************!*\
+  !*** ./src/images/warning-24x24.svg ***!
+  \**************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M21.7818 16.5701L14.3518 4.41009C13.8518 3.59009 12.9718 3.09009 12.0018 3.09009C11.0318 3.09009 10.1618 3.58009 9.65175 4.41009L2.22175 16.5701C1.69175 17.4301 1.67175 18.4701 2.17175 19.3501C2.66175 20.2301 3.56175 20.7501 4.57175 20.7501H19.4418C20.4518 20.7501 21.3518 20.2201 21.8418 19.3501C22.3318 18.4701 22.3118 17.4301 21.7918 16.5701H21.7818ZM20.5218 18.6201C20.3018 19.0201 19.8918 19.2601 19.4318 19.2601H4.57175C4.11175 19.2601 3.70175 19.0201 3.48175 18.6201C3.26175 18.2201 3.27175 17.7501 3.50175 17.3601L10.9318 5.19009C11.1618 4.81009 11.5518 4.59009 12.0018 4.59009C12.4518 4.59009 12.8318 4.81009 13.0718 5.19009L20.5018 17.3501C20.7418 17.7401 20.7518 18.2101 20.5218 18.6101V18.6201ZM11.2518 12.0001V9.00009C11.2518 8.59009 11.5918 8.25009 12.0018 8.25009C12.4118 8.25009 12.7518 8.59009 12.7518 9.00009V12.0001C12.7518 12.4101 12.4118 12.7501 12.0018 12.7501C11.5918 12.7501 11.2518 12.4101 11.2518 12.0001ZM13.0018 16.0001C13.0018 16.5501 12.5518 17.0001 12.0018 17.0001C11.4518 17.0001 11.0018 16.5501 11.0018 16.0001C11.0018 15.4501 11.4518 15.0001 12.0018 15.0001C12.5518 15.0001 13.0018 15.4501 13.0018 16.0001Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/localizationManager.ts":
 /*!************************************!*\
   !*** ./src/localizationManager.ts ***!
@@ -4193,10 +4466,16 @@ __webpack_require__.r(__webpack_exports__);
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
     location: "column",
     name: "drag",
-    visibleIndex: 0,
+    visibleIndex: 10,
     render: function (table, options) {
-        var btn = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("button", "sa-table__svg-button sa-table__drag-button");
-        btn.appendChild(_utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgElement("drag"));
+        var btn = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("drag-24x24");
+        btn.className = "sa-table__svg-button sa-table__drag-button";
+        btn.title = _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("columnReorder");
+        // const btn = DocumentHelper.createElement(
+        //   "button",
+        //   "sa-table__svg-button sa-table__drag-button"
+        // );
+        // btn.appendChild(DocumentHelper.createSvgElement("drag-24x24"));
         btn.addEventListener("mousedown", function () {
             table.enableColumnReorder();
             document.body.addEventListener("mouseup", function () {
@@ -4209,12 +4488,12 @@ _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension(
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
     location: "column",
     name: "sort",
-    visibleIndex: 1,
+    visibleIndex: 20,
     render: function (table, options) {
         var descTitle = _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("descOrder");
         var ascTitle = _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("ascOrder");
-        var btn = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("sorting");
-        btn.title = "";
+        var btn = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("reorder-24x24");
+        btn.title = _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("defaultOrder");
         var direction = "asc";
         btn.onclick = function () {
             if (direction == "asc") {
@@ -4236,10 +4515,9 @@ _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension(
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
     location: "column",
     name: "hide",
-    visibleIndex: 2,
+    visibleIndex: 30,
     render: function (table, options) {
-        var btn = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("hide");
-        btn.title = _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("hideColumn");
+        var btn = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("invisible-24x24", _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("hideColumn"));
         btn.onclick = function () {
             table.setColumnVisibility(options.columnName, false);
         };
@@ -4249,10 +4527,9 @@ _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension(
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
     location: "column",
     name: "movetodetails",
-    visibleIndex: 3,
+    visibleIndex: 10,
     render: function (table, options) {
-        var button = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("movetodetails");
-        button.title = _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("moveToDetail");
+        var button = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("movetohorizontal-24x24", _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("moveToDetail"));
         button.onclick = function (e) {
             e.stopPropagation();
             table.setColumnLocation(options.columnName, _config__WEBPACK_IMPORTED_MODULE_3__.QuestionLocation.Row);
@@ -4261,15 +4538,23 @@ _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension(
     },
 });
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
-    location: "column",
+    location: "columnfilter",
     name: "filter",
-    visibleIndex: 4,
+    visibleIndex: 10,
     render: function (table, options) {
-        var el = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createInput("sa-table__filter", _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("filterPlaceholder"));
-        el.onclick = function (e) { return e.stopPropagation(); };
-        el.onchange = function (e) {
-            table.applyColumnFilter(options.columnName, el.value);
-        };
+        var el = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createTextEditor({
+            showIcon: false,
+            onchange: function (val) {
+                table.applyColumnFilter(options.columnName, val);
+            }
+        }
+        // "sa-table__filter",
+        // localization.getString("filterPlaceholder")
+        );
+        // el.onclick = (e) => e.stopPropagation();
+        // el.onchange = (e) => {
+        //   table.applyColumnFilter(options.columnName, el.value);
+        // };
         return el;
     },
 });
@@ -4340,8 +4625,9 @@ var Details = /** @class */ (function () {
         this.targetNode = targetNode;
         this.location = "details";
         this.createShowAsColumnButton = function (columnName) {
-            var button = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("button", "sa-table__btn sa-table__btn--gray");
-            button.appendChild(document.createTextNode(_localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("showAsColumn")));
+            var button = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgButton("movetovertical-24x24", _localizationManager__WEBPACK_IMPORTED_MODULE_3__.localization.getString("showAsColumn"));
+            // "button",
+            // "sa-table__btn sa-table__btn--gray"
             button.onclick = function (e) {
                 e.stopPropagation();
                 _this.table.setColumnLocation(columnName, _config__WEBPACK_IMPORTED_MODULE_1__.QuestionLocation.Column);
@@ -4366,16 +4652,20 @@ var Details = /** @class */ (function () {
             var td2 = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("td");
             td2.textContent = _this.row.getRowData()[column.name];
             if (column.dataType === _config__WEBPACK_IMPORTED_MODULE_1__.ColumnDataType.Image) {
-                td2.innerHTML = "<image src='" + td2.textContent + "'/>";
+                var imageElement = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("img", "", {
+                    src: td2.textContent
+                });
+                td2.innerHTML = "";
+                td2.appendChild(imageElement);
             }
             var td3 = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("td");
             td3.appendChild(_this.createShowAsColumnButton(column.name));
+            row.appendChild(td3);
             row.appendChild(td1);
             row.appendChild(td2);
-            row.appendChild(td3);
             rows.push(row);
         });
-        var row = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("tr", "sa-table__detail");
+        var row = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("tr", "sa-table__detail sa-table-detail__actions");
         var td = _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createElement("td", "", { colSpan: 3 });
         var extensions = new _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions(this.table);
         extensions.render(td, "details", { row: this.row });
@@ -4400,17 +4690,14 @@ var Details = /** @class */ (function () {
 
 /***/ }),
 
-/***/ "./src/tables/extensions/headerextensions.ts":
+/***/ "./src/tables/extensions/footerextensions.ts":
 /*!***************************************************!*\
-  !*** ./src/tables/extensions/headerextensions.ts ***!
+  !*** ./src/tables/extensions/footerextensions.ts ***!
   \***************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   HeaderExtensions: () => (/* binding */ HeaderExtensions)
-/* harmony export */ });
 /* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../localizationManager */ "./src/localizationManager.ts");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.ts");
 /* harmony import */ var _tableextensions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./tableextensions */ "./src/tables/extensions/tableextensions.ts");
@@ -4418,146 +4705,206 @@ __webpack_require__.r(__webpack_exports__);
 
 
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
-    location: "header",
-    name: "filter",
-    visibleIndex: 0,
-    render: function (table) {
-        var input = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createInput("sa-table__global-filter sa-table__header-extension", _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("filterPlaceholder"));
-        input.onchange = function (event) {
-            table.applyFilter(event.target.value);
-        };
-        return input;
-    },
-});
-_tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
-    location: "header",
-    name: "showcolumn",
-    visibleIndex: 2,
-    destroy: function () {
-        this.onDestroy();
-    },
-    render: function (table) {
-        var dropdown = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("select", "sa-table__show-column sa-table__header-extension");
-        function update() {
-            var hiddenColumns = table.columns.filter(function (column) { return !column.isVisible; });
-            if (hiddenColumns.length == 0) {
-                dropdown.style.display = "none";
-                return;
-            }
-            dropdown.style.display = "inline-block";
-            dropdown.innerHTML = "";
-            var option = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("option", "", {
-                text: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("showColumn"),
-                disabled: true,
-                selected: true,
-            });
-            dropdown.appendChild(option);
-            hiddenColumns.forEach(function (column) {
-                var text = column.displayName || column.name;
-                if (!!text && text.length > 20) {
-                    text = text.substring(0, 20) + "...";
-                }
-                var option = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("option", "", {
-                    text: text,
-                    title: column.displayName,
-                    value: column.name,
-                });
-                dropdown.appendChild(option);
-            });
-        }
-        dropdown.onchange = function (e) {
-            var val = e.target.value;
-            e.stopPropagation();
-            if (!val)
-                return;
-            table.setColumnVisibility(val, true);
-        };
-        update();
-        var onVisibilityChangedCallback = function () {
-            update();
-        };
-        table.onColumnsVisibilityChanged.add(onVisibilityChangedCallback);
-        this.onDestroy = function () {
-            table.onColumnsVisibilityChanged.remove(onVisibilityChangedCallback);
-        };
-        return dropdown;
-    },
-});
-_tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
-    location: "header",
+    location: "footer",
     name: "showentries",
-    visibleIndex: 3,
+    visibleIndex: 30,
     render: function (table) {
         if (table.options.paginationEnabled === false) {
             return _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("div");
         }
         function getEntriesDropdown(table) {
-            var el = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("select");
+            /*
+            const el = <HTMLSelectElement>DocumentHelper.createElement("select");
             var optionsValues = table.paginationSizeSelector || ["1", "5", "10", "25", "50", "75", "100"];
             optionsValues.forEach(function (val) {
-                var option = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("option", "", {
-                    value: val,
-                    text: val,
-                });
-                el.appendChild(option);
+              var option = DocumentHelper.createElement("option", "", {
+                value: val,
+                text: val,
+              });
+              el.appendChild(option);
             });
             el.value = String(table.getPageSize());
-            el.onchange = function () {
-                table.setPageSize(Number(el.value));
+      
+            el.onchange = () => {
+              table.setPageSize(Number(el.value));
             };
+      
+            return el;
+            */
+            var optionsValues = table.paginationSizeSelector || ["1", "5", "10", "25", "50", "75", "100"];
+            var el = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createActionDropdown({
+                options: optionsValues.map(function (val) { return { value: val, text: val }; }),
+                isSelected: function (option) {
+                    return option.value === table.getPageSize();
+                },
+                handler: function (e) {
+                    if (e !== undefined && e !== null) {
+                        table.setPageSize(Number(e));
+                    }
+                    return true;
+                },
+                title: function () { return String(table.getPageSize()); },
+                direction: "up"
+            });
+            el.className += " sa-table__entries-value";
             return el;
         }
         var selectorContainer = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("div", "sa-table__entries");
-        var spaceSpan = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("span", "sa-table__header-space");
         var showSpan = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("span", "sa-table__entries-label sa-table__entries-label--right", {
-            innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("showLabel"),
+            innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("entriesOnPageLabel"),
         });
-        var entriesSpan = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("span", "sa-table__entries-label sa-table__entries-label--left", {
-            innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("entriesLabel"),
-        });
-        selectorContainer.appendChild(spaceSpan);
         selectorContainer.appendChild(showSpan);
         selectorContainer.appendChild(getEntriesDropdown(table));
-        selectorContainer.appendChild(entriesSpan);
         return selectorContainer;
     },
 });
+
+
+/***/ }),
+
+/***/ "./src/tables/extensions/headerextensions.ts":
+/*!***************************************************!*\
+  !*** ./src/tables/extensions/headerextensions.ts ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   HeaderExtensions: () => (/* binding */ HeaderExtensions)
+/* harmony export */ });
+/* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../localizationManager */ "./src/localizationManager.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.ts");
+/* harmony import */ var _tableextensions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./tableextensions */ "./src/tables/extensions/tableextensions.ts");
+
+
+
+_tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
+    location: "header",
+    name: "filter",
+    visibleIndex: 1,
+    render: function (table) {
+        // const input = DocumentHelper.createInput(
+        //   "sa-table__global-filter sa-table__header-extension",
+        //   localization.getString("filterPlaceholder")
+        // );
+        // input.onchange = (event: any) => {
+        //   table.applyFilter(event.target.value);
+        // };
+        var el = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createTextEditor({
+            onchange: function (val) { table.applyFilter(val); }
+        });
+        return el;
+    },
+});
+_tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
+    location: "header",
+    name: "showcolumn",
+    visibleIndex: 20,
+    render: function (table) {
+        // const dropdown = DocumentHelper.createElement(
+        //   "select",
+        //   "sa-table__show-column sa-table__header-extension"
+        // );
+        var allColumns = table.columns.map(function (column) {
+            var text = column.displayName || column.name;
+            if (!!text && text.length > 20) {
+                text = text.substring(0, 20) + "...";
+            }
+            return {
+                value: column.name,
+                text: text,
+                title: column.displayName || column.name,
+                icon: "check-24x24"
+            };
+        });
+        var dropdown = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createActionDropdown({
+            options: allColumns,
+            isSelected: function (option) {
+                var hiddenColumns = table.columns.filter(function (column) { return !column.isVisible; });
+                return hiddenColumns.length === 0 || hiddenColumns.filter(function (el) { return el.name === option.value; }).length === 0;
+            },
+            handler: function (e) {
+                if (!!e) {
+                    if (!e)
+                        return;
+                    var column = table.columns.filter(function (column) { return column.name === e; })[0];
+                    table.setColumnVisibility(e, !column.isVisible);
+                    return false;
+                }
+            },
+            title: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("columns")
+        });
+        dropdown.className += " sa-table__show-column sa-table__header-extension";
+        return dropdown;
+    },
+});
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
     location: "header",
     name: "removerows",
     visibleIndex: -1,
     render: function (table) {
-        var btn = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("button", "sa-table__btn sa-table__btn--green sa-table__header-extension ", { innerText: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("removeRows") });
-        btn.onclick = function () {
+        var btn = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createButton(function (e) {
             table.getCreatedRows().forEach(function (row) {
                 if (row.getIsSelected()) {
                     row.remove();
                 }
             });
-        };
+        }, _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("removeRows"), "sa-button");
+        btn.className += " sa-table__header-extension sa-button-brand-tertiary";
         return btn;
+        // var btn = DocumentHelper.createElement(
+        //   "button",
+        //   "sa-table__btn sa-table__header-extension ",
+        //   { innerText: localization.getString("removeRows") }
+        // );
+        // btn.onclick = function () {
+        //   table.getCreatedRows().forEach(function (row) {
+        //     if (row.getIsSelected()) {
+        //       row.remove();
+        //     }
+        //   });
+        // };
+        // return btn;
     },
 });
 _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension({
     location: "header",
     name: "changelocale",
-    visibleIndex: 1,
+    visibleIndex: 40,
     render: function (table) {
         var locales = table.getLocales();
         if (table.options.disableLocaleSwitch || locales.length < 2)
             return null;
-        var el = (_utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("select", "sa-table__header-extension", {}));
-        var optionsValues = [_localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("changeLocale")].concat(locales);
+        /*
+        const el = <HTMLSelectElement>(
+          DocumentHelper.createElement("select", "sa-table__header-extension", {})
+        );
+        var optionsValues = [localization.getString("changeLocale")].concat(locales);
         optionsValues.forEach(function (val) {
-            var option = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("option", "", {
-                value: val,
-                text: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.localeNames[val] || _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString(val) || val,
-            });
-            el.appendChild(option);
+          var option = DocumentHelper.createElement("option", "", {
+            value: val,
+            text: localization.localeNames[val] || localization.getString(val) || val,
+          });
+          el.appendChild(option);
         });
-        el.onchange = function () {
-            table.locale = el.value;
+        el.onchange = () => {
+          table.locale = el.value;
         };
+        */
+        var optionsValues = locales.map(function (val) { return { value: val, text: _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.localeNames[val] || _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString(val) || val }; });
+        var el = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createActionDropdown({
+            options: optionsValues,
+            isSelected: function (option) { return false; },
+            handler: function (e) {
+                if (!!e) {
+                    table.locale = e;
+                }
+                return true;
+            },
+            title: function () { return _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("changeLocale"); },
+        });
+        el.className += " sa-table__header-extension";
         return el;
     },
 });
@@ -4585,8 +4932,7 @@ _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension(
     name: "details",
     visibleIndex: 0,
     render: function (_table, options) {
-        var btn = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createSvgButton("detail");
-        btn.title = _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("showMinorColumns");
+        var btn = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createSvgButton("more-24x24", _localizationManager__WEBPACK_IMPORTED_MODULE_0__.localization.getString("showMinorColumns"));
         btn.className += " sa-table__row-extension";
         btn.onclick = function () {
             options.row.toggleDetails();
@@ -4599,15 +4945,34 @@ _tableextensions__WEBPACK_IMPORTED_MODULE_2__.TableExtensions.registerExtension(
     name: "select",
     visibleIndex: -1,
     render: function (_table, opt) {
+        var itemClassSelected = "sa-checkbox--checked";
         var row = opt.row;
-        var checkbox = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("input", "sa-table__row-extension", {
-            type: "checkbox",
-        });
-        checkbox.checked = row.getIsSelected();
-        checkbox.onchange = function () {
+        var iconContainer = _utils__WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createSvgButton("check-24x24");
+        iconContainer.onclick = function () {
             row.toggleSelect();
+            if (row.getIsSelected()) {
+                iconContainer.classList.add(itemClassSelected);
+            }
+            else {
+                iconContainer.classList.remove(itemClassSelected);
+            }
         };
-        return checkbox;
+        iconContainer.className = "sa-checkbox sa-table__row-extension";
+        if (row.getIsSelected()) {
+            iconContainer.classList.add(itemClassSelected);
+        }
+        // var checkbox = <HTMLInputElement>DocumentHelper.createElement(
+        //   "input",
+        //   "sa-table__row-extension",
+        //   {
+        //     type: "checkbox",
+        //   }
+        // );
+        // checkbox.checked = row.getIsSelected();
+        // checkbox.onchange = function () {
+        //   row.toggleSelect();
+        // };
+        return iconContainer;
     },
 });
 
@@ -4636,18 +5001,21 @@ var TableExtensions = /** @class */ (function () {
         if (!!extensions) {
             extensions = this.sortExtensions(extensions);
             extensions.forEach(function (extension) {
-                if (!!extension.render && _this.table.allowExtension(extension)) {
-                    var action = extension.render(_this.table, options);
-                    if (!!action) {
-                        targetNode.appendChild(action);
-                        _this.renderedExtensions.push(extension);
-                    }
-                }
+                _this.renderExtension(extension, targetNode, options);
             });
         }
     };
-    TableExtensions.prototype.destroy = function () {
-        this.renderedExtensions.forEach(function (extension) {
+    TableExtensions.prototype.renderExtension = function (extension, targetNode, options) {
+        if (!!extension.render && this.table.allowExtension(extension)) {
+            var action = extension.render(this.table, options);
+            if (!!action) {
+                targetNode.appendChild(action);
+                this.renderedExtensions.push(extension);
+            }
+        }
+    };
+    TableExtensions.prototype.destroy = function () {
+        this.renderedExtensions.forEach(function (extension) {
             if (!!extension.destroy)
                 extension.destroy();
         });
@@ -5249,7 +5617,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../localizationManager */ "./src/localizationManager.ts");
 /* harmony import */ var _custom_jspdf_font__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./custom_jspdf_font */ "./src/tables/custom_jspdf_font.ts");
 /* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../svgbundle */ "./src/svgbundle.ts");
-/* harmony import */ var _tabulator_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./tabulator.scss */ "./src/tables/tabulator.scss");
+/* harmony import */ var _extensions_tableextensions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./extensions/tableextensions */ "./src/tables/extensions/tableextensions.ts");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../theme */ "./src/theme.ts");
+/* harmony import */ var _tabulator_scss__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./tabulator.scss */ "./src/tables/tabulator.scss");
+
+
 
 
 
@@ -5287,8 +5659,8 @@ var defaultDownloadOptions = {
 };
 var defaultOptions = {
     tabulatorOptions: {},
-    actionsColumnWidth: 60,
-    columnMinWidth: 248,
+    actionsColumnWidth: 56,
+    columnMinWidth: 384,
     downloadHiddenColumns: false,
     downloadButtons: ["csv"],
     downloadOptions: defaultDownloadOptions,
@@ -5319,6 +5691,7 @@ var Tabulator = /** @class */ (function (_super) {
     function Tabulator(survey, data, options, _columnsData) {
         if (_columnsData === void 0) { _columnsData = []; }
         var _this = _super.call(this, survey, data, options, _columnsData) || this;
+        _this._theme = new _theme__WEBPACK_IMPORTED_MODULE_9__.DashboardTheme();
         _this.onAfterRender = new survey_core__WEBPACK_IMPORTED_MODULE_2__.Event();
         _this.COLUMN_MIN_WIDTH = 155;
         _this.tabulatorTables = null;
@@ -5330,7 +5703,8 @@ var Tabulator = /** @class */ (function (_super) {
         };
         _this.columnMovedCallback = function (column, columns) {
             var from = _this._columns.indexOf(_this.getColumnByName(column.getField()));
-            var to = columns.indexOf(column) - 1;
+            var rowExtensions = _extensions_tableextensions__WEBPACK_IMPORTED_MODULE_8__.TableExtensions.getExtensions("row").filter(function (e) { return e.visibleIndex >= 0; });
+            var to = columns.indexOf(column) - rowExtensions.length;
             _this.moveColumn(from, to);
             _this.disableColumnReorder();
         };
@@ -5405,13 +5779,25 @@ var Tabulator = /** @class */ (function (_super) {
             targetNode = document.getElementById(targetNode);
         }
         targetNode.className += " sa-table sa-tabulator";
+        if (!this._appliedTheme) {
+            this._appliedTheme = this.theme;
+        }
+        if (this._appliedTheme) {
+            this._appliedTheme.applyThemeToElement(targetNode);
+        }
         var columns = this.getColumns();
         var data = this.tableData;
+        var wrapper = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__wrapper");
+        var container = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__container");
         var header = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__header");
+        var footer = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__footer");
         var paginationElement = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__pagination-container");
-        this.tableContainer = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
-        targetNode.appendChild(header);
-        targetNode.appendChild(this.tableContainer);
+        this.tableContainer = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__table-container");
+        container.appendChild(header);
+        container.appendChild(this.tableContainer);
+        container.appendChild(footer);
+        wrapper.appendChild(container);
+        targetNode.appendChild(wrapper);
         var config = {};
         Object.assign(config, {
             data: data,
@@ -5420,7 +5806,7 @@ var Tabulator = /** @class */ (function (_super) {
             paginationMode: "local",
             paginationSize: this.currentPageSize,
             movableColumns: true,
-            // maxHeight: "100%",
+            maxHeight: "50vw",
             columns: columns,
             rowFormatter: this.rowFormatter,
             paginationElement: paginationElement,
@@ -5483,38 +5869,74 @@ var Tabulator = /** @class */ (function (_super) {
             _this.afterRender(targetNode);
         });
         var extensionsContainer = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-table__header-extensions");
+        this.extensions.render(extensionsContainer, "header");
+        header.appendChild(extensionsContainer);
         header.appendChild(this.createDownloadsBar());
-        this.extensions.render(header, "header");
-        // header.appendChild(extensionsContainer);
-        header.appendChild(paginationElement);
+        this.extensions.render(footer, "footer");
+        footer.appendChild(paginationElement);
+        this.renderResult = targetNode;
     };
     Tabulator.prototype.createDownloadsBar = function () {
-        var _this = this;
-        var createDownloadButton = function (type, caption) {
-            var btn = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("button", "sa-table__btn sa-table__btn--small sa-table__btn--gray", {
-                innerText: caption,
-                onclick: function () {
-                    _this.download(type);
-                },
-            });
-            return btn;
+        /*
+        var createDownloadButton = (type: DownloadType, caption: string): HTMLElement => {
+          const btn = DocumentHelper.createElement(
+            "button",
+            "sa-table__btn sa-table__btn--small sa-table__btn--gray",
+            {
+              innerText: caption,
+              onclick: () => {
+                this.download(type);
+              },
+            }
+          );
+          return btn;
         };
-        var container = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator__downloads-bar");
-        this._options.downloadButtons.forEach(function (type) {
-            container.appendChild(createDownloadButton(type, _localizationManager__WEBPACK_IMPORTED_MODULE_5__.localization.getString("".concat(type, "DownloadCaption"))));
+    
+        var container = DocumentHelper.createElement(
+          "div",
+          "sa-tabulator__downloads-bar"
+        );
+    
+        this._options.downloadButtons.forEach((type: DownloadType) => {
+          container.appendChild(
+            createDownloadButton(
+              type,
+              localization.getString(`${type}DownloadCaption`)
+            )
+          );
         });
         return container;
+        */
+        var _this = this;
+        var values = this._options.downloadButtons.map(function (val) { return { value: val, text: _localizationManager__WEBPACK_IMPORTED_MODULE_5__.localization.getString("".concat(val, "DownloadCaption")) }; });
+        var exportAsAction = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createActionDropdown({
+            options: values,
+            isSelected: function (option) { return false; },
+            handler: function (e) {
+                if (!!e) {
+                    _this.download(e);
+                }
+                return true;
+            },
+            title: _localizationManager__WEBPACK_IMPORTED_MODULE_5__.localization.getString("exportAs"),
+            showArrow: false
+        });
+        exportAsAction.className += " sa-tabulator__downloads-bar sa-button-brand-secondary";
+        return exportAsAction;
     };
     Tabulator.prototype.getTitleFormatter = function (cell, formatterParams, onRendered, columnName) {
         var _this = this;
-        var container = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div");
-        var title = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("span", "", {
+        var container = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-tabulator-column-header");
+        var title = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("span", "sa-tabulator-column-title-text", {
             innerText: cell.getValue(),
         });
-        var actions = this.getHeaderActions(columnName);
-        container.appendChild(actions);
+        var actionContainer = this.getHeaderActions(columnName);
+        var containerFilter = _utils__WEBPACK_IMPORTED_MODULE_4__.DocumentHelper.createElement("div", "sa-table__filter-container");
+        this.extensions.render(containerFilter, "columnfilter", { columnName: columnName });
+        container.appendChild(actionContainer);
         container.appendChild(title);
-        ["mousemove", "mousedown"].forEach(function (eventName) { return actions.addEventListener(eventName, function (event) {
+        container.appendChild(containerFilter);
+        ["mousemove", "mousedown"].forEach(function (eventName) { return actionContainer.addEventListener(eventName, function (event) {
             if (!_this.isColumnReorderEnabled) {
                 event.stopPropagation();
             }
@@ -5554,20 +5976,22 @@ var Tabulator = /** @class */ (function (_super) {
                 },
             };
         });
-        // const rowExtensions = TableExtensions.getExtensions("row").filter(e => e.visibleIndex >= 0);
+        var rowExtensions = _extensions_tableextensions__WEBPACK_IMPORTED_MODULE_8__.TableExtensions.getExtensions("row").filter(function (e) { return e.visibleIndex >= 0; });
         // const detailsExtension = TableExtensions.getExtensions("details").filter(e => e.visibleIndex >= 0);
         // const hasRowColumns = this.columns.some(c => c.location === QuestionLocation.Row);
         // if(rowExtensions.length > 1 || detailsExtension.length > 0
         //       || rowExtensions.length == 1 && (rowExtensions[0].name == "details" && hasRowColumns || rowExtensions[0].name != "details")) {
-        columns.unshift({
-            download: false,
-            resizable: false,
-            headerSort: false,
-            minWidth: this._options.actionsColumnWidth,
-            width: this._options.actionsColumnWidth,
-            tooltip: function (_, cell) {
-                return _localizationManager__WEBPACK_IMPORTED_MODULE_5__.localization.getString("actionsColumn");
-            }
+        rowExtensions.forEach(function (ext) {
+            columns.unshift({
+                download: false,
+                resizable: false,
+                headerSort: false,
+                minWidth: _this._options.actionsColumnWidth,
+                width: _this._options.actionsColumnWidth,
+                tooltip: function (_, cell) {
+                    return undefined;
+                }
+            });
         });
         // }
         return columns;
@@ -5666,6 +6090,24 @@ var Tabulator = /** @class */ (function (_super) {
         dataItem["surveyOriginalData"] = item;
         return dataItem;
     };
+    Object.defineProperty(Tabulator.prototype, "theme", {
+        get: function () {
+            return this._theme;
+        },
+        set: function (theme) {
+            this._theme = theme;
+            this._appliedTheme = undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Tabulator.prototype.applyTheme = function (theme) {
+        this.theme.setTheme(theme);
+        this._appliedTheme = this.theme;
+        if (this.renderResult) {
+            this._appliedTheme.applyThemeToElement(this.renderResult);
+        }
+    };
     return Tabulator;
 }(_table__WEBPACK_IMPORTED_MODULE_1__.Table));
 
@@ -5692,6 +6134,18 @@ var TabulatorRow = /** @class */ (function (_super) {
         }
         return null;
     };
+    TabulatorRow.prototype.render = function () {
+        var _this = this;
+        var rowExtensions = _extensions_tableextensions__WEBPACK_IMPORTED_MODULE_8__.TableExtensions.getExtensions("row").filter(function (e) { return e.visibleIndex >= 0; });
+        rowExtensions = this.extensions.sortExtensions(rowExtensions);
+        rowExtensions.forEach(function (rowExt, index) {
+            var cellAction = _this.innerRow.getCells()[index].getElement();
+            cellAction.innerHTML = "";
+            _this.extensions.renderExtension(rowExt, cellAction, { row: _this });
+            cellAction.classList.add("sa-tabulator-cell__action");
+            cellAction.classList.add("sa-tabulator-cell__action-" + rowExt.name.toLowerCase());
+        });
+    };
     TabulatorRow.prototype.remove = function () {
         this.innerRow.delete();
         _super.prototype.remove.call(this);
@@ -5701,6 +6155,1810 @@ var TabulatorRow = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/theme.ts":
+/*!**********************!*\
+  !*** ./src/theme.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DashboardTheme: () => (/* binding */ DashboardTheme)
+/* harmony export */ });
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ "./src/utils/index.ts");
+/* harmony import */ var _themes_default_light__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./themes/default-light */ "./src/themes/default-light.ts");
+
+
+function getRGBaColor(colorValue) {
+    if (!colorValue)
+        return null;
+    if (colorValue.indexOf("rgba") === 0) {
+        return colorValue;
+    }
+    var canvasElement = document.createElement("canvas");
+    if (!canvasElement)
+        return null;
+    var ctx = canvasElement.getContext("2d");
+    ctx.fillStyle = colorValue;
+    if (ctx.fillStyle == "#000000") {
+        ctx.fillStyle = colorValue;
+    }
+    var newStr = ctx.fillStyle;
+    var regex = /color\s*\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+))?\s*\)/i;
+    var match = newStr.match(regex);
+    if (!match) {
+        if (newStr.indexOf("rgba") === 0) {
+            return newStr;
+        }
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(newStr);
+        return result ? "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", 1)") : null;
+    }
+    var r = parseFloat(match[1]);
+    var g = parseFloat(match[2]);
+    var b = parseFloat(match[3]);
+    var alpha = match[4] ? parseFloat(match[4]) : 1;
+    var r255 = Math.round(r * 255);
+    var g255 = Math.round(g * 255);
+    var b255 = Math.round(b * 255);
+    return "rgba(".concat(r255, ", ").concat(g255, ", ").concat(b255, ", ").concat(alpha, ")");
+}
+var DashboardTheme = /** @class */ (function () {
+    function DashboardTheme(theme) {
+        if (theme === void 0) { theme = _themes_default_light__WEBPACK_IMPORTED_MODULE_1__["default"]; }
+        this.theme = theme;
+        this._computedValuesCache = {};
+        this.setTheme(theme);
+    }
+    DashboardTheme.prototype.getCssVariableValue = function (propertyName, checkIsNumber) {
+        if (checkIsNumber === void 0) { checkIsNumber = false; }
+        var value = undefined;
+        if (this._computedValuesCache[propertyName]) {
+            value = this._computedValuesCache[propertyName];
+        }
+        else if (!!this._cssStyleDeclaration) {
+            value = this._cssStyleDeclaration.getPropertyValue(propertyName);
+        }
+        if (checkIsNumber) {
+            var numValue = parseFloat(value);
+            if (isNaN(numValue)) {
+                return undefined;
+            }
+        }
+        return value;
+    };
+    DashboardTheme.prototype.initComputedValuesCache = function (rootElement) {
+        var _this = this;
+        var tempElement = document.createElement("div");
+        tempElement.style.position = "absolute";
+        tempElement.style.visibility = "hidden";
+        tempElement.style.top = "0";
+        tempElement.style.left = "0";
+        rootElement.appendChild(tempElement);
+        Object.keys(this.cssVariables).forEach(function (key) {
+            var value;
+            if (key.indexOf("palette") !== -1 || key.indexOf("color") !== -1) {
+                tempElement.style.setProperty("color", "var(".concat(key, ")"));
+                var computedStyle = getComputedStyle(tempElement);
+                value = computedStyle.getPropertyValue("color");
+                value = getRGBaColor(value);
+            }
+            else if (key.indexOf("font-family") === -1 && key.indexOf("opacity") === -1 && key.indexOf("scale") === -1) {
+                tempElement.style.setProperty("width", "var(".concat(key, ")"));
+                var computedStyle = getComputedStyle(tempElement);
+                value = computedStyle.getPropertyValue("width");
+            }
+            else {
+                value = _this._cssStyleDeclaration.getPropertyValue(key);
+            }
+            _this._computedValuesCache[key] = value;
+        });
+        rootElement.removeChild(tempElement);
+    };
+    DashboardTheme.prototype.applyThemeToElement = function (element) {
+        if (!element)
+            return;
+        if (!this.theme) {
+            element.removeAttribute("style");
+            this._cssStyleDeclaration = undefined;
+            return;
+        }
+        _utils__WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.setStyles(element, this.cssVariables);
+        if (!!getComputedStyle) {
+            this._cssStyleDeclaration = getComputedStyle(element);
+        }
+        this.initComputedValuesCache(element);
+    };
+    DashboardTheme.prototype.setTheme = function (theme) {
+        this.theme = theme;
+        this._computedValuesCache = {};
+        // const calculater = DocumentHelper.createElement("div");
+        // document.body.appendChild(calculater);
+        // this.applyThemeToElement(calculater);
+        // calculater.remove();
+    };
+    Object.defineProperty(DashboardTheme.prototype, "cssVariables", {
+        get: function () {
+            return this.theme.cssVariables;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "defaultFontFamily", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-typography-font-family-text") || DashboardTheme.fontFamily;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "backgroundColor", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-bg-basic-primary");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "axisGridColor", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-data-grid-border-line");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "axisBorderColor", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-data-grid-border-axis");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "modebarActiveColor", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-fg-brand-primary");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "modebarColor", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-bg-brand-secondary-dim");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DashboardTheme.prototype.isFontLoaded = function (fontFaceName) {
+        return !fontFaceName || !document || !document.fonts || document.fonts.check("1em " + fontFaceName);
+    };
+    DashboardTheme.prototype.isAxisLabelFontLoaded = function () {
+        var _a;
+        return this.isFontLoaded((_a = this.axisLabelFont) === null || _a === void 0 ? void 0 : _a.family);
+    };
+    Object.defineProperty(DashboardTheme.prototype, "axisLabelFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-data-grid-fg-label"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-small", true),
+                weight: 400
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "insideLabelFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-data-chart-fg-on-color-1"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-small", true),
+                weight: 600
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "legendLabelFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-fg-basic-primary"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-small", true),
+                weight: 400
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "legendSetting", {
+        get: function () {
+            return {
+                borderWidth: this.getCssVariableValue("--sjs2-border-width-default"),
+                borderColor: this.getCssVariableValue("--sjs2-color-border-basic-secondary"),
+                borderRadius: this.getCssVariableValue("--sjs2-radius-x250"),
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "tooltipBackground", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-bg-neutral-primary");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "tooltipFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-fg-neutral-on-primary"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-small", true),
+                weight: 400
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "noDataFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-fg-basic-secondary"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-default", true),
+                weight: 400
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "gaugeBackground", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-bg-basic-secondary");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "gaugeBarColor", {
+        get: function () {
+            return this.getCssVariableValue("--sjs2-color-fg-brand-primary");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "gaugeValueFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-fg-basic-primary"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-large", true),
+                weight: 600
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "gaugeTickFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-data-grid-fg-label"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-small", true),
+                weight: 400
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DashboardTheme.prototype, "radarLabelFont", {
+        get: function () {
+            return {
+                color: this.getCssVariableValue("--sjs2-color-fg-basic-primary"),
+                family: this.defaultFontFamily,
+                size: this.getCssVariableValue("--sjs2-typography-font-size-small", true),
+                weight: 400
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DashboardTheme.barGap = 0.05;
+    DashboardTheme.fontFamily = "'Open Sans', 'Segoe UI', SegoeUI, Arial, sans-serif";
+    return DashboardTheme;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/themes/default-light.ts":
+/*!*************************************!*\
+  !*** ./src/themes/default-light.ts ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DefaultLight: () => (/* binding */ DefaultLight),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// Auto-generated theme: default-light
+var DefaultLight = {
+    "themeName": "default-light",
+    "iconSet": "v2",
+    "isLight": true,
+    "cssVariables": {
+        "--sjs2-base-unit-size": "8px",
+        "--sjs2-base-unit-spacing": "8px",
+        "--sjs2-base-unit-radius": "8px",
+        "--sjs2-base-unit-border-width": "1px",
+        "--sjs2-base-unit-font-size": "8px",
+        "--sjs2-base-unit-line-height": "8px",
+        "--sjs2-base-unit-opacity": "1%",
+        "--sjs2-base-unit-scale": "1%",
+        "--sjs2-scale-x000": "calc(var(--sjs2-base-unit-scale) * 0)",
+        "--sjs2-scale-x025": "calc(var(--sjs2-base-unit-scale) * 25)",
+        "--sjs2-scale-x050": "calc(var(--sjs2-base-unit-scale) * 50)",
+        "--sjs2-scale-x075": "calc(var(--sjs2-base-unit-scale) * 75)",
+        "--sjs2-scale-x095": "calc(var(--sjs2-base-unit-scale) * 95)",
+        "--sjs2-scale-x100": "calc(var(--sjs2-base-unit-scale) * 100)",
+        "--sjs2-scale-x200": "calc(var(--sjs2-base-unit-scale) * 200)",
+        "--sjs2-size-x000": "calc(var(--sjs2-base-unit-size) * 0)",
+        "--sjs2-size-x025": "calc(var(--sjs2-base-unit-size) * 0.25)",
+        "--sjs2-size-x050": "calc(var(--sjs2-base-unit-size) * 0.50)",
+        "--sjs2-size-x075": "calc(var(--sjs2-base-unit-size) * 0.75)",
+        "--sjs2-size-x100": "calc(var(--sjs2-base-unit-size) * 1)",
+        "--sjs2-size-x150": "calc(var(--sjs2-base-unit-size) * 1.50)",
+        "--sjs2-size-x200": "calc(var(--sjs2-base-unit-size) * 2)",
+        "--sjs2-size-x250": "calc(var(--sjs2-base-unit-size) * 2.50)",
+        "--sjs2-size-x300": "calc(var(--sjs2-base-unit-size) * 3)",
+        "--sjs2-size-x350": "calc(var(--sjs2-base-unit-size) * 3.50)",
+        "--sjs2-size-x400": "calc(var(--sjs2-base-unit-size) * 4)",
+        "--sjs2-size-x500": "calc(var(--sjs2-base-unit-size) * 5)",
+        "--sjs2-size-x600": "calc(var(--sjs2-base-unit-size) * 6)",
+        "--sjs2-size-x700": "calc(var(--sjs2-base-unit-size) * 7)",
+        "--sjs2-size-x800": "calc(var(--sjs2-base-unit-size) * 8)",
+        "--sjs2-size-x900": "calc(var(--sjs2-base-unit-size) * 9)",
+        "--sjs2-size-x1000": "calc(var(--sjs2-base-unit-size) * 10)",
+        "--sjs2-size-x1100": "calc(var(--sjs2-base-unit-size) * 11)",
+        "--sjs2-size-x1200": "calc(var(--sjs2-base-unit-size) * 12)",
+        "--sjs2-size-x1300": "calc(var(--sjs2-base-unit-size) * 13)",
+        "--sjs2-size-x1400": "calc(var(--sjs2-base-unit-size) * 14)",
+        "--sjs2-size-x1500": "calc(var(--sjs2-base-unit-size) * 15)",
+        "--sjs2-radius-x000": "calc(var(--sjs2-base-unit-radius) * 0)",
+        "--sjs2-radius-x025": "calc(var(--sjs2-base-unit-radius) * 0.25)",
+        "--sjs2-radius-x050": "calc(var(--sjs2-base-unit-radius) * 0.50)",
+        "--sjs2-radius-x075": "calc(var(--sjs2-base-unit-radius) * 0.75)",
+        "--sjs2-radius-x100": "calc(var(--sjs2-base-unit-radius) * 1)",
+        "--sjs2-radius-x150": "calc(var(--sjs2-base-unit-radius) * 1.50)",
+        "--sjs2-radius-x200": "calc(var(--sjs2-base-unit-radius) * 2)",
+        "--sjs2-radius-x250": "calc(var(--sjs2-base-unit-radius) * 2.50)",
+        "--sjs2-radius-x300": "calc(var(--sjs2-base-unit-radius) * 3)",
+        "--sjs2-radius-x400": "calc(var(--sjs2-base-unit-radius) * 4)",
+        "--sjs2-radius-x500": "calc(var(--sjs2-base-unit-radius) * 5)",
+        "--sjs2-radius-x600": "calc(var(--sjs2-base-unit-radius) * 6)",
+        "--sjs2-radius-x700": "calc(var(--sjs2-base-unit-radius) * 7)",
+        "--sjs2-radius-x800": "calc(var(--sjs2-base-unit-radius) * 8)",
+        "--sjs2-radius-round": "9999px",
+        "--sjs2-spacing-x000": "calc(var(--sjs2-base-unit-spacing) * 0)",
+        "--sjs2-spacing-x025": "calc(var(--sjs2-base-unit-spacing) * 0.25)",
+        "--sjs2-spacing-x050": "calc(var(--sjs2-base-unit-spacing) * 0.50)",
+        "--sjs2-spacing-x075": "calc(var(--sjs2-base-unit-spacing) * 0.75)",
+        "--sjs2-spacing-x100": "calc(var(--sjs2-base-unit-spacing) * 1)",
+        "--sjs2-spacing-x150": "calc(var(--sjs2-base-unit-spacing) * 1.5)",
+        "--sjs2-spacing-x200": "calc(var(--sjs2-base-unit-spacing) * 2)",
+        "--sjs2-spacing-x250": "calc(var(--sjs2-base-unit-spacing) * 2.50)",
+        "--sjs2-spacing-x300": "calc(var(--sjs2-base-unit-spacing) * 3)",
+        "--sjs2-spacing-x400": "calc(var(--sjs2-base-unit-spacing) * 4)",
+        "--sjs2-spacing-x500": "calc(var(--sjs2-base-unit-spacing) * 5)",
+        "--sjs2-spacing-x550": "calc(var(--sjs2-base-unit-spacing) * 5.5)",
+        "--sjs2-spacing-x600": "calc(var(--sjs2-base-unit-spacing) * 6)",
+        "--sjs2-spacing-x700": "calc(var(--sjs2-base-unit-spacing) * 7)",
+        "--sjs2-spacing-x800": "calc(var(--sjs2-base-unit-spacing) * 8)",
+        "--sjs2-spacing-negative-x025": "calc(var(--sjs2-base-unit-spacing) * -0.25)",
+        "--sjs2-spacing-negative-x050": "calc(var(--sjs2-base-unit-spacing) * -0.50)",
+        "--sjs2-spacing-negative-x075": "calc(var(--sjs2-base-unit-spacing) * -0.75)",
+        "--sjs2-spacing-negative-x100": "calc(var(--sjs2-base-unit-spacing) * -1)",
+        "--sjs2-spacing-negative-x150": "calc(var(--sjs2-base-unit-spacing) * -1.5)",
+        "--sjs2-spacing-negative-x200": "calc(var(--sjs2-base-unit-spacing) * -2)",
+        "--sjs2-spacing-negative-x250": "calc(var(--sjs2-base-unit-spacing) * -2.50)",
+        "--sjs2-spacing-negative-x300": "calc(var(--sjs2-base-unit-spacing) * -3)",
+        "--sjs2-spacing-negative-x400": "calc(var(--sjs2-base-unit-spacing) * -4)",
+        "--sjs2-spacing-negative-x500": "calc(var(--sjs2-base-unit-spacing) * -5)",
+        "--sjs2-spacing-negative-x600": "calc(var(--sjs2-base-unit-spacing) * -6)",
+        "--sjs2-spacing-negative-x700": "calc(var(--sjs2-base-unit-spacing) * -7)",
+        "--sjs2-spacing-negative-x800": "calc(var(--sjs2-base-unit-spacing) * -8)",
+        "--sjs2-opacity-x000": "calc(var(--sjs2-base-unit-opacity) * 0)",
+        "--sjs2-opacity-x005": "calc(var(--sjs2-base-unit-opacity) * 5)",
+        "--sjs2-opacity-x010": "calc(var(--sjs2-base-unit-opacity) * 10)",
+        "--sjs2-opacity-x015": "calc(var(--sjs2-base-unit-opacity) * 15)",
+        "--sjs2-opacity-x020": "calc(var(--sjs2-base-unit-opacity) * 20)",
+        "--sjs2-opacity-x025": "calc(var(--sjs2-base-unit-opacity) * 25)",
+        "--sjs2-opacity-x030": "calc(var(--sjs2-base-unit-opacity) * 30)",
+        "--sjs2-opacity-x035": "calc(var(--sjs2-base-unit-opacity) * 35)",
+        "--sjs2-opacity-x040": "calc(var(--sjs2-base-unit-opacity) * 40)",
+        "--sjs2-opacity-x045": "calc(var(--sjs2-base-unit-opacity) * 45)",
+        "--sjs2-opacity-x050": "calc(var(--sjs2-base-unit-opacity) * 50)",
+        "--sjs2-opacity-x055": "calc(var(--sjs2-base-unit-opacity) * 55)",
+        "--sjs2-opacity-x060": "calc(var(--sjs2-base-unit-opacity) * 60)",
+        "--sjs2-opacity-x065": "calc(var(--sjs2-base-unit-opacity) * 65)",
+        "--sjs2-opacity-x070": "calc(var(--sjs2-base-unit-opacity) * 70)",
+        "--sjs2-opacity-x075": "calc(var(--sjs2-base-unit-opacity) * 75)",
+        "--sjs2-opacity-x080": "calc(var(--sjs2-base-unit-opacity) * 80)",
+        "--sjs2-opacity-x085": "calc(var(--sjs2-base-unit-opacity) * 85)",
+        "--sjs2-opacity-x090": "calc(var(--sjs2-base-unit-opacity) * 90)",
+        "--sjs2-opacity-x095": "calc(var(--sjs2-base-unit-opacity) * 95)",
+        "--sjs2-opacity-x100": "calc(var(--sjs2-base-unit-opacity) * 100)",
+        "--sjs2-border-width-x000": "calc(var(--sjs2-base-unit-border-width) * 0)",
+        "--sjs2-border-width-x100": "calc(var(--sjs2-base-unit-border-width) * 1)",
+        "--sjs2-border-width-x200": "calc(var(--sjs2-base-unit-border-width) * 2)",
+        "--sjs2-border-width-x400": "calc(var(--sjs2-base-unit-border-width) * 4)",
+        "--sjs2-font-weight-regular": "400",
+        "--sjs2-font-weight-medium": "500",
+        "--sjs2-font-weight-semibold": "600",
+        "--sjs2-font-weight-bold": "700",
+        "--sjs2-font-size-x000": "calc(var(--sjs2-base-unit-font-size) * 0)",
+        "--sjs2-font-size-x100": "calc(var(--sjs2-base-unit-font-size) * 1)",
+        "--sjs2-font-size-x150": "calc(var(--sjs2-base-unit-font-size) * 1.5)",
+        "--sjs2-font-size-x200": "calc(var(--sjs2-base-unit-font-size) * 2)",
+        "--sjs2-font-size-x250": "calc(var(--sjs2-base-unit-font-size) * 2.5)",
+        "--sjs2-font-size-x300": "calc(var(--sjs2-base-unit-font-size) * 3)",
+        "--sjs2-font-size-x350": "calc(var(--sjs2-base-unit-font-size) * 3.5)",
+        "--sjs2-font-size-x400": "calc(var(--sjs2-base-unit-font-size) * 4)",
+        "--sjs2-font-size-x500": "calc(var(--sjs2-base-unit-font-size) * 5)",
+        "--sjs2-font-size-x600": "calc(var(--sjs2-base-unit-font-size) * 6)",
+        "--sjs2-line-height-x000": "calc(var(--sjs2-base-unit-line-height) * 0)",
+        "--sjs2-line-height-x100": "calc(var(--sjs2-base-unit-line-height) * 1)",
+        "--sjs2-line-height-x200": "calc(var(--sjs2-base-unit-line-height) * 2)",
+        "--sjs2-line-height-x300": "calc(var(--sjs2-base-unit-line-height) * 3)",
+        "--sjs2-line-height-x400": "calc(var(--sjs2-base-unit-line-height) * 4)",
+        "--sjs2-line-height-x500": "calc(var(--sjs2-base-unit-line-height) * 5)",
+        "--sjs2-line-height-x600": "calc(var(--sjs2-base-unit-line-height) * 6)",
+        "--sjs2-text-case-default": "none",
+        "--sjs2-text-case-uppercase": "uppercase",
+        "--sjs2-palette-gray-100": "#F5F5F5",
+        "--sjs2-palette-gray-150": "#EDEDED",
+        "--sjs2-palette-gray-200": "#E5E5E5",
+        "--sjs2-palette-gray-250": "#D4D4D4",
+        "--sjs2-palette-gray-300": "#CDCDCD",
+        "--sjs2-palette-gray-400": "#B3B2B2",
+        "--sjs2-palette-gray-500": "#8E8E8E",
+        "--sjs2-palette-gray-600": "#5F5E61",
+        "--sjs2-palette-gray-700": "#424146",
+        "--sjs2-palette-gray-750": "#36353C",
+        "--sjs2-palette-gray-800": "#2D2C33",
+        "--sjs2-palette-gray-900": "#1C1B20",
+        "--sjs2-palette-gray-950": "#161519",
+        "--sjs2-palette-gray-999": "#111014",
+        "--sjs2-palette-gray-000": "#fff",
+        "--sjs2-palette-red-400": "#ff6e84",
+        "--sjs2-palette-red-600": "#E50A3E",
+        "--sjs2-palette-red-700": "#C30935",
+        "--sjs2-palette-green-400": "#15CDAB",
+        "--sjs2-palette-green-600": "#19B394",
+        "--sjs2-palette-green-700": "#15947A",
+        "--sjs2-palette-blue-400": "#66B4FC",
+        "--sjs2-palette-blue-600": "#437FD9",
+        "--sjs2-palette-blue-700": "#2A6CD0",
+        "--sjs2-palette-yellow-400": "#FEC64A",
+        "--sjs2-palette-yellow-600": "#FF9814",
+        "--sjs2-palette-yellow-700": "#F08700",
+        "--sjs2-palette-violet-400": "#C36FF4",
+        "--sjs2-palette-violet-600": "#A62CEC",
+        "--sjs2-palette-violet-700": "#9614E1",
+        "--sjs2-palette-olive-400": "#6FC648",
+        "--sjs2-palette-olive-600": "#4FAF24",
+        "--sjs2-palette-olive-700": "#41901E",
+        "--sjs2-palette-purple-400": "#A190FA",
+        "--sjs2-palette-purple-600": "#6E5BD1",
+        "--sjs2-palette-purple-700": "#5640C9",
+        "--sjs2-palette-indianred-400": "#F9786A",
+        "--sjs2-palette-indianred-600": "#AF496B",
+        "--sjs2-palette-indianred-700": "#973F5C",
+        "--sjs2-layout-control-formbox-small-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-formbox-small-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-formbox-small-gap": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-formbox-medium-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-formbox-medium-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-formbox-medium-gap": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-message-small-spacer": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-message-small-horizontal": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-message-small-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-message-small-gap": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-message-medium-spacer": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-message-medium-horizontal": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-message-medium-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-message-medium-gap": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-small-content-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-small-content-horizontal": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-small-swatch-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-small-swatch-left": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-small-swatch-right": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-input-small-icon-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-small-icon-left": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-small-icon-right": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-input-small-label-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-small-label-horizontal": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-small-group-gap": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-small-limit-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-small-limit-left": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-small-limit-right": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-content-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-content-horizontal": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-input-medium-swatch-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-swatch-left": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-input-medium-swatch-right": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-input-medium-icon-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-icon-left": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-icon-right": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-input-medium-label-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-label-horizontal": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-input-medium-group-gap": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-input-medium-limit-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-limit-left": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-input-medium-limit-right": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-action-xx-small-label-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-xx-small-label-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-xx-small-icon-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-xx-small-icon-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-xx-small-box-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-xx-small-box-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-xx-small-box-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-xx-small-addon-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-xx-small-addon-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-x-small-label-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-label-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-icon-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-icon-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-box-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-box-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-box-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-x-small-addon-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-x-small-addon-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-small-label-horizontal": "var(--sjs2-spacing-x075)",
+        "--sjs2-layout-control-action-small-label-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-small-icon-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-small-icon-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-small-box-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-action-small-box-horizontal": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-action-small-box-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-small-addon-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-small-addon-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-medium-label-horizontal": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-action-medium-label-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-medium-icon-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-medium-icon-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-medium-box-vertical": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-action-medium-box-horizontal": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-action-medium-box-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-medium-addon-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-medium-addon-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-large-label-horizontal": "var(--sjs2-spacing-x150)",
+        "--sjs2-layout-control-action-large-label-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-large-icon-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-large-icon-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-large-box-vertical": "var(--sjs2-spacing-x200)",
+        "--sjs2-layout-control-action-large-box-horizontal": "var(--sjs2-spacing-x200)",
+        "--sjs2-layout-control-action-large-box-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-action-large-addon-vertical": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-action-large-addon-horizontal": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-caption-small-box-left": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-small-box-right": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-caption-small-box-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-small-box-gap": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-caption-small-group-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-small-description-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-small-description-top": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-small-description-bottom": "var(--sjs2-spacing-x200)",
+        "--sjs2-layout-control-caption-small-caption-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-small-caption-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-control-caption-medium-box-left": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-medium-box-right": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-caption-medium-box-vertical": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-medium-box-gap": "var(--sjs2-spacing-x050)",
+        "--sjs2-layout-control-caption-medium-group-gap": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-medium-description-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-medium-description-top": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-medium-description-bottom": "var(--sjs2-spacing-x200)",
+        "--sjs2-layout-control-caption-medium-caption-horizontal": "var(--sjs2-spacing-x000)",
+        "--sjs2-layout-control-caption-medium-caption-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-container-drop-horizontal": "var(--sjs2-spacing-x100)",
+        "--sjs2-layout-container-drop-vertical": "var(--sjs2-spacing-x100)",
+        "--sjs2-size-semantic-xx-small": "var(--sjs2-size-x300)",
+        "--sjs2-size-semantic-x-small": "var(--sjs2-size-x400)",
+        "--sjs2-size-semantic-small": "var(--sjs2-size-x500)",
+        "--sjs2-size-semantic-medium": "var(--sjs2-size-x600)",
+        "--sjs2-size-semantic-large": "var(--sjs2-size-x700)",
+        "--sjs2-size-icon-small": "var(--sjs2-size-x200)",
+        "--sjs2-size-icon-medium": "var(--sjs2-size-x300)",
+        "--sjs2-size-icon-large": "var(--sjs2-size-x400)",
+        "--sjs2-is-panelless": "false",
+        "--sjs2-radius-semantic-form": "var(--sjs2-radius-x100)",
+        "--sjs2-radius-semantic-form-item": "var(--sjs2-radius-x050)",
+        "--sjs2-radius-control-action": "var(--sjs2-radius-semantic-form)",
+        "--sjs2-radius-control-action-icon": "var(--sjs2-radius-semantic-form)",
+        "--sjs2-radius-control-button": "var(--sjs2-radius-semantic-form)",
+        "--sjs2-radius-control-menu-item": "var(--sjs2-radius-semantic-form)",
+        "--sjs2-radius-control-drop-item": "var(--sjs2-radius-x100)",
+        "--sjs2-radius-control-checkbox": "var(--sjs2-radius-semantic-form-item)",
+        "--sjs2-radius-control-rating": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-ranking": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-boolean": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-boolean-item": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-toggle": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-toggle-thumb": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-track": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-track-item": "var(--sjs2-radius-round)",
+        "--sjs2-radius-control-track-thumb": "var(--sjs2-radius-round)",
+        "--sjs2-radius-container-panel": "var(--sjs2-radius-x150)",
+        "--sjs2-radius-container-panel-nested": "var(--sjs2-radius-x100)",
+        "--sjs2-radius-container-drop": "var(--sjs2-radius-x200)",
+        "--sjs2-radius-container-modal": "var(--sjs2-radius-x300)",
+        "--sjs2-radius-container-notifier": "var(--sjs2-radius-x200)",
+        "--sjs2-radius-container-tooltip": "var(--sjs2-radius-x050)",
+        "--sjs2-radius-container-drag": "var(--sjs2-radius-semantic-form)",
+        "--sjs2-typography-font-family-text": "Open Sans",
+        "--sjs2-typography-font-family-code": "DM Mono",
+        "--sjs2-typography-font-size-small": "var(--sjs2-font-size-x150)",
+        "--sjs2-typography-font-size-default": "var(--sjs2-font-size-x200)",
+        "--sjs2-typography-font-size-medium": "var(--sjs2-font-size-x300)",
+        "--sjs2-typography-font-size-large": "var(--sjs2-font-size-x400)",
+        "--sjs2-typography-line-height-small": "var(--sjs2-line-height-x200)",
+        "--sjs2-typography-line-height-default": "var(--sjs2-line-height-x300)",
+        "--sjs2-typography-line-height-medium": "var(--sjs2-line-height-x400)",
+        "--sjs2-typography-line-height-large": "var(--sjs2-line-height-x500)",
+        "--sjs2-typography-font-weight-basic": "var(--sjs2-font-weight-regular)",
+        "--sjs2-typography-font-weight-strong": "var(--sjs2-font-weight-semibold)",
+        "--sjs2-color-project-brand-400": "hsl(from var(--sjs2-color-project-brand-600) h s calc(l * 1.1))",
+        "--sjs2-color-project-brand-600": "#19B394",
+        "--sjs2-color-project-brand-700": "hsl(from var(--sjs2-color-project-brand-600) h s calc(l * 0.85))",
+        "--sjs2-color-project-accent-400": "hsl(from var(--sjs2-color-project-accent-600) h s calc(l * 1.1))",
+        "--sjs2-color-project-accent-600": "#19B394",
+        "--sjs2-color-project-accent-700": "hsl(from var(--sjs2-color-project-accent-600) h s calc(l * 0.85))",
+        "--sjs2-color-utility-body": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-utility-sheet": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-utility-a11y": "rgba(from var(--sjs2-palette-blue-400) r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-utility-scrollbar": "rgba(from var(--sjs2-palette-gray-999) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-utility-overlay": "rgba(from var(--sjs2-palette-gray-700) r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-utility-chrome-toolbox": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-utility-chrome-property-grid": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-utility-chrome-tabs": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-utility-surface-survey": "#1c1b200d",
+        "--sjs2-color-utility-surface-designer": "#EDF9F7",
+        "--sjs2-color-utility-surface-presets-manager": "#1c1b200d",
+        "--sjs2-color-utility-surface-dashboard": "var(--sjs2-color-utility-surface-survey)",
+        "--sjs2-color-utility-surface-preview": "var(--sjs2-color-utility-surface-survey)",
+        "--sjs2-color-utility-surface-themes": "var(--sjs2-color-utility-surface-survey)",
+        "--sjs2-color-utility-surface-logic": "var(--sjs2-color-utility-surface-designer)",
+        "--sjs2-color-utility-surface-json-editor": "var(--sjs2-color-utility-surface-designer)",
+        "--sjs2-color-utility-surface-translations": "var(--sjs2-color-utility-surface-designer)",
+        "--sjs2-color-utility-surface-embed-survey": "var(--sjs2-color-utility-surface-designer)",
+        "--sjs2-color-utility-surface-embed-creator": "var(--sjs2-color-utility-surface-designer)",
+        "--sjs2-color-utility-shadow-surface-default": "rgba(from var(--sjs2-palette-gray-999) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-utility-shadow-surface-hovered": "rgba(from var(--sjs2-color-project-brand-600) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-utility-shadow-surface-pressed": "var(--sjs2-color-project-brand-600)",
+        "--sjs2-color-utility-shadow-surface-focused": "var(--sjs2-color-project-brand-600)",
+        "--sjs2-color-utility-shadow-surface-disabled": "rgba(from var(--sjs2-palette-gray-999) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-utility-shadow-surface-dragging": "rgba(from #004C44 r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-utility-shadow-elevated-default": "rgba(from #004C44 r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-utility-shadow-floating-default": "rgba(from #004C44 r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-basic-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-bg-basic-secondary": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-bg-basic-tertiary": "var(--sjs2-palette-gray-150)",
+        "--sjs2-color-bg-basic-primary-dim": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-bg-basic-secondary-dim": "var(--sjs2-palette-gray-150)",
+        "--sjs2-color-bg-basic-tertiary-dim": "var(--sjs2-palette-gray-200)",
+        "--sjs2-color-bg-basic-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-neutral-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-bg-neutral-secondary": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-bg-neutral-tertiary": "rgba(from var(--sjs2-palette-gray-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-neutral-primary-dim": "var(--sjs2-palette-gray-700)",
+        "--sjs2-color-bg-neutral-secondary-dim": "var(--sjs2-palette-gray-150)",
+        "--sjs2-color-bg-neutral-tertiary-dim": "rgba(from var(--sjs2-palette-gray-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-neutral-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-brand-primary": "var(--sjs2-color-project-brand-600)",
+        "--sjs2-color-bg-brand-secondary": "rgba(from var(--sjs2-color-project-brand-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-brand-tertiary": "rgba(from var(--sjs2-color-project-brand-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-brand-primary-dim": "var(--sjs2-color-project-brand-700)",
+        "--sjs2-color-bg-brand-secondary-dim": "rgba(from var(--sjs2-color-project-brand-600) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-brand-tertiary-dim": "rgba(from var(--sjs2-color-project-brand-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-brand-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-accent-primary": "var(--sjs2-color-project-accent-600)",
+        "--sjs2-color-bg-accent-secondary": "rgba(from var(--sjs2-color-project-accent-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-accent-tertiary": "rgba(from var(--sjs2-color-project-accent-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-accent-primary-dim": "var(--sjs2-color-project-accent-700)",
+        "--sjs2-color-bg-accent-secondary-dim": "rgba(from var(--sjs2-color-project-accent-600) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-accent-tertiary-dim": "rgba(from var(--sjs2-color-project-accent-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-accent-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-note-primary": "var(--sjs2-palette-blue-600)",
+        "--sjs2-color-bg-note-secondary": "rgba(from var(--sjs2-palette-blue-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-note-tertiary": "rgba(from var(--sjs2-palette-blue-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-note-primary-dim": "var(--sjs2-palette-blue-700)",
+        "--sjs2-color-bg-note-secondary-dim": "rgba(from var(--sjs2-palette-blue-600) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-note-tertiary-dim": "rgba(from var(--sjs2-palette-blue-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-note-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-positive-primary": "var(--sjs2-palette-green-600)",
+        "--sjs2-color-bg-positive-secondary": "rgba(from var(--sjs2-palette-green-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-positive-tertiary": "rgba(from var(--sjs2-palette-green-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-positive-primary-dim": "var(--sjs2-palette-green-700)",
+        "--sjs2-color-bg-positive-secondary-dim": "rgba(from var(--sjs2-palette-green-600) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-positive-tertiary-dim": "rgba(from var(--sjs2-palette-green-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-positive-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-warning-primary": "var(--sjs2-palette-yellow-600)",
+        "--sjs2-color-bg-warning-secondary": "rgba(from var(--sjs2-palette-yellow-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-warning-tertiary": "rgba(from var(--sjs2-palette-yellow-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-warning-primary-dim": "var(--sjs2-palette-yellow-700)",
+        "--sjs2-color-bg-warning-secondary-dim": "rgba(from var(--sjs2-palette-yellow-600) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-warning-tertiary-dim": "rgba(from var(--sjs2-palette-yellow-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-warning-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-alert-primary": "var(--sjs2-palette-red-600)",
+        "--sjs2-color-bg-alert-secondary": "rgba(from var(--sjs2-palette-red-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-alert-tertiary": "rgba(from var(--sjs2-palette-red-600) r g b / var(--sjs2-opacity-x000))",
+        "--sjs2-color-bg-alert-primary-dim": "var(--sjs2-palette-red-700)",
+        "--sjs2-color-bg-alert-secondary-dim": "rgba(from var(--sjs2-palette-red-600) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-alert-tertiary-dim": "rgba(from var(--sjs2-palette-red-600) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-alert-primary-disabled": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-bg-static-1-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-bg-static-1-secondary": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-static-1-primary-dim": "var(--sjs2-palette-gray-700)",
+        "--sjs2-color-bg-static-1-secondary-dim": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-bg-static-2-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-bg-static-2-secondary": "rgba(from var(--sjs2-palette-gray-000) r g b / var(--sjs2-opacity-x010))",
+        "--sjs2-color-bg-static-2-primary-dim": "hsl(from var(--sjs2-palette-gray-100) h s calc(l * 1.1))",
+        "--sjs2-color-bg-static-2-secondary-dim": "rgba(from var(--sjs2-palette-gray-000) r g b / var(--sjs2-opacity-x015))",
+        "--sjs2-color-fg-basic-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-fg-basic-primary-muted": "var(--sjs2-palette-gray-700)",
+        "--sjs2-color-fg-basic-secondary": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-fg-basic-tertiary": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-basic-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-neutral-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-fg-neutral-primary-muted": "var(--sjs2-palette-gray-700)",
+        "--sjs2-color-fg-neutral-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-neutral-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-brand-primary": "var(--sjs2-color-project-accent-600)",
+        "--sjs2-color-fg-brand-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-brand-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-accent-primary": "var(--sjs2-color-project-accent-600)",
+        "--sjs2-color-fg-accent-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-accent-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-note-primary": "var(--sjs2-palette-blue-700)",
+        "--sjs2-color-fg-note-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-note-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-positive-primary": "var(--sjs2-palette-green-600)",
+        "--sjs2-color-fg-positive-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-positive-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-warning-primary": "var(--sjs2-palette-yellow-700)",
+        "--sjs2-color-fg-warning-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-warning-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-alert-primary": "var(--sjs2-palette-red-700)",
+        "--sjs2-color-fg-alert-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-alert-primary-disabled": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-fg-static-1-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-fg-static-2-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-border-basic-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-border-basic-secondary": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-border-basic-secondary-overlay": "rgba(from var(--sjs2-palette-gray-900) r g b / var(--sjs2-opacity-x040))",
+        "--sjs2-color-border-neutral-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-neutral-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-brand-primary": "var(--sjs2-color-project-brand-600)",
+        "--sjs2-color-border-brand-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-accent-primary": "var(--sjs2-color-project-accent-600)",
+        "--sjs2-color-border-accent-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-note-primary": "var(--sjs2-palette-blue-600)",
+        "--sjs2-color-border-note-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-positive-primary": "var(--sjs2-palette-green-600)",
+        "--sjs2-color-border-positive-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-warning-primary": "var(--sjs2-palette-yellow-600)",
+        "--sjs2-color-border-warning-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-alert-primary": "var(--sjs2-palette-red-600)",
+        "--sjs2-color-border-alert-on-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-static-1-primary": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-border-static-2-primary": "var(--sjs2-palette-gray-900)",
+        "--sjs2-color-control-formbox-default-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-default-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-formbox-disabled-bg": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-control-formbox-disabled-border": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-readonly-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-formbox-readonly-border": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-formbox-focused-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-formbox-invalid-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-invalid-border": "var(--sjs2-color-border-alert-primary)",
+        "--sjs2-color-control-formbox-highlighted-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-highlighted-border": "var(--sjs2-color-border-basic-primary)",
+        "--sjs2-color-control-formbox-design-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-design-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-formbox-hovered-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-formbox-hovered-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-input-default-line": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-input-default-value": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-input-default-placeholder": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-default-label": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-default-limit": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-default-icon": "var(--sjs2-color-fg-basic-tertiary)",
+        "--sjs2-color-control-input-default-description": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-disabled-line": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-disabled-value": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-disabled-placeholder": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-disabled-label": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-disabled-limit": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-disabled-icon": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-disabled-description": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-readonly-line": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-input-readonly-value": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-input-readonly-placeholder": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-readonly-label": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-readonly-limit": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-input-readonly-icon": "var(--sjs2-color-fg-basic-tertiary)",
+        "--sjs2-color-control-input-readonly-description": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-check-false-default-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-check-false-default-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-check-false-disabled-bg": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-control-check-false-disabled-border": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-check-false-readonly-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-check-false-readonly-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-check-false-focused-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-check-false-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-check-false-hovered-bg": "var(--sjs2-color-bg-basic-secondary-dim)",
+        "--sjs2-color-control-check-false-hovered-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-check-false-design-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-check-false-design-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-check-true-default-bg": "var(--sjs2-color-bg-brand-primary)",
+        "--sjs2-color-control-check-true-default-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-check-true-default-icon": "var(--sjs2-color-fg-static-1-primary)",
+        "--sjs2-color-control-check-true-disabled-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-check-true-disabled-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-check-true-disabled-icon": "var(--sjs2-palette-gray-400)",
+        "--sjs2-color-control-check-true-readonly-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-check-true-readonly-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-check-true-readonly-icon": "var(--sjs2-palette-gray-400)",
+        "--sjs2-color-control-check-true-focused-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-check-true-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-check-true-focused-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-check-true-hovered-bg": "var(--sjs2-color-bg-brand-primary-dim)",
+        "--sjs2-color-control-check-true-hovered-border": "var(--sjs2-color-bg-brand-primary-dim)",
+        "--sjs2-color-control-check-true-hovered-icon": "var(--sjs2-color-fg-static-1-primary)",
+        "--sjs2-color-control-segmented-false-default-bg": "rgba(from var(--sjs2-color-bg-basic-secondary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-segmented-false-default-border": "rgba(from var(--sjs2-color-border-basic-secondary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-segmented-false-default-value": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-segmented-false-disabled-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-segmented-false-disabled-border": "rgba(from var(--sjs2-color-border-basic-secondary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-segmented-false-disabled-value": "var(--sjs2-palette-gray-250)",
+        "--sjs2-color-control-segmented-false-readonly-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-segmented-false-readonly-border": "rgba(from var(--sjs2-color-border-basic-secondary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-segmented-false-readonly-value": "var(--sjs2-palette-gray-400)",
+        "--sjs2-color-control-segmented-false-focused-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-segmented-false-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-segmented-false-focused-value": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-segmented-false-hovered-bg": "var(--sjs2-color-bg-basic-secondary-dim)",
+        "--sjs2-color-control-segmented-false-hovered-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-segmented-false-hovered-value": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-segmented-true-default-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-segmented-true-default-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-segmented-true-default-value": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-segmented-true-disabled-bg": "var(--sjs2-color-bg-basic-primary-dim)",
+        "--sjs2-color-control-segmented-true-disabled-border": "rgba(from var(--sjs2-color-border-basic-secondary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-segmented-true-disabled-value": "var(--sjs2-palette-gray-400)",
+        "--sjs2-color-control-segmented-true-readonly-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-segmented-true-readonly-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-segmented-true-readonly-value": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-segmented-true-focused-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-segmented-true-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-segmented-true-focused-value": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-toggle-false-default-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-toggle-false-default-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-toggle-false-default-thumb": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-toggle-false-disabled-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-toggle-false-disabled-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-toggle-false-disabled-thumb": "var(--sjs2-color-fg-basic-tertiary)",
+        "--sjs2-color-control-toggle-false-readonly-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-toggle-false-readonly-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-toggle-false-readonly-thumb": "var(--sjs2-color-fg-basic-tertiary)",
+        "--sjs2-color-control-toggle-false-focused-bg": "var(--sjs2-palette-gray-100)",
+        "--sjs2-color-control-toggle-false-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-toggle-false-focused-thumb": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-toggle-false-hovered-bg": "var(--sjs2-color-bg-basic-secondary-dim)",
+        "--sjs2-color-control-toggle-false-hovered-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-toggle-false-hovered-thumb": "var(--sjs2-color-fg-basic-secondary)",
+        "--sjs2-color-control-toggle-true-default-bg": "var(--sjs2-color-bg-brand-primary)",
+        "--sjs2-color-control-toggle-true-default-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-toggle-true-default-thumb": "var(--sjs2-color-fg-static-1-primary)",
+        "--sjs2-color-control-toggle-true-disabled-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-toggle-true-disabled-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-toggle-true-disabled-thumb": "var(--sjs2-color-fg-static-1-primary)",
+        "--sjs2-color-control-toggle-true-readonly-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-toggle-true-readonly-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-toggle-true-readonly-thumb": "var(--sjs2-color-fg-static-1-primary)",
+        "--sjs2-color-control-toggle-true-focused-bg": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-toggle-true-focused-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-toggle-true-focused-thumb": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-toggle-true-hovered-bg": "var(--sjs2-color-bg-brand-primary-dim)",
+        "--sjs2-color-control-toggle-true-hovered-border": "var(--sjs2-color-border-brand-primary)",
+        "--sjs2-color-control-toggle-true-hovered-thumb": "var(--sjs2-color-fg-static-1-primary)",
+        "--sjs2-color-control-message-error-bg": "var(--sjs2-color-bg-alert-secondary)",
+        "--sjs2-color-control-message-error-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-message-error-text": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-message-info-bg": "var(--sjs2-color-bg-note-secondary)",
+        "--sjs2-color-control-message-info-icon": "var(--sjs2-color-fg-note-primary)",
+        "--sjs2-color-control-message-info-text": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-control-track-default-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-track-default-fg": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-track-default-thumb": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-default-dot": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-track-default-thumb-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-track-disabled-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-track-disabled-fg": "var(--sjs2-color-fg-basic-tertiary)",
+        "--sjs2-color-control-track-disabled-thumb": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-disabled-dot": "var(--sjs2-color-fg-state-common-disabled)",
+        "--sjs2-color-control-track-disabled-thumb-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-track-readonly-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-track-readonly-fg": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-track-readonly-thumb": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-readonly-dot": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-readonly-thumb-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-track-focused-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-track-focused-fg": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-track-focused-thumb": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-focused-dot": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-track-focused-thumb-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-track-invalid-bg": "var(--sjs2-color-bg-alert-secondary)",
+        "--sjs2-color-control-track-invalid-fg": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-track-invalid-thumb": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-invalid-dot": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-track-invalid-thumb-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-track-design-bg": "var(--sjs2-color-bg-basic-secondary)",
+        "--sjs2-color-control-track-design-fg": "var(--sjs2-color-fg-basic-tertiary)",
+        "--sjs2-color-control-track-design-thumb": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-design-dot": "var(--sjs2-color-bg-basic-primary)",
+        "--sjs2-color-control-track-design-thumb-border": "var(--sjs2-color-border-basic-secondary)",
+        "--sjs2-color-control-action-alert-primary-default-bg": "var(--sjs2-color-bg-alert-primary)",
+        "--sjs2-color-control-action-alert-primary-default-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-primary-default-icon": "var(--sjs2-color-fg-alert-on-primary)",
+        "--sjs2-color-control-action-alert-primary-default-label": "var(--sjs2-color-fg-alert-on-primary)",
+        "--sjs2-color-control-action-alert-primary-hovered-bg": "var(--sjs2-color-bg-alert-primary-dim)",
+        "--sjs2-color-control-action-alert-primary-hovered-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-primary-hovered-icon": "var(--sjs2-color-fg-alert-on-primary)",
+        "--sjs2-color-control-action-alert-primary-hovered-label": "var(--sjs2-color-fg-alert-on-primary)",
+        "--sjs2-color-control-action-alert-primary-pressed-bg": "var(--sjs2-color-bg-alert-primary)",
+        "--sjs2-color-control-action-alert-primary-pressed-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-primary-pressed-icon": "var(--sjs2-color-fg-alert-on-primary)",
+        "--sjs2-color-control-action-alert-primary-pressed-label": "var(--sjs2-color-fg-alert-on-primary)",
+        "--sjs2-color-control-action-alert-primary-disabled-bg": "var(--sjs2-color-bg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-primary-disabled-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-primary-disabled-icon": "var(--sjs2-color-fg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-primary-disabled-label": "var(--sjs2-color-fg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-secondary-default-bg": "var(--sjs2-color-bg-alert-secondary)",
+        "--sjs2-color-control-action-alert-secondary-default-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-secondary-default-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-secondary-default-label": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-secondary-hovered-bg": "var(--sjs2-color-bg-alert-secondary-dim)",
+        "--sjs2-color-control-action-alert-secondary-hovered-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-secondary-hovered-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-secondary-hovered-label": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-secondary-pressed-bg": "var(--sjs2-color-bg-alert-secondary)",
+        "--sjs2-color-control-action-alert-secondary-pressed-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-secondary-pressed-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-secondary-pressed-label": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-secondary-disabled-bg": "var(--sjs2-color-bg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-secondary-disabled-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-secondary-disabled-icon": "var(--sjs2-color-fg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-secondary-disabled-label": "var(--sjs2-color-fg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-tertiary-default-bg": "var(--sjs2-color-bg-alert-tertiary)",
+        "--sjs2-color-control-action-alert-tertiary-default-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-tertiary-default-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-tertiary-default-label": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-tertiary-hovered-bg": "var(--sjs2-color-bg-alert-tertiary-dim)",
+        "--sjs2-color-control-action-alert-tertiary-hovered-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-tertiary-hovered-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-tertiary-hovered-label": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-tertiary-pressed-bg": "var(--sjs2-color-bg-alert-tertiary-dim)",
+        "--sjs2-color-control-action-alert-tertiary-pressed-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-tertiary-pressed-icon": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-tertiary-pressed-label": "var(--sjs2-color-fg-alert-primary)",
+        "--sjs2-color-control-action-alert-tertiary-disabled-bg": "rgba(from var(--sjs2-color-bg-alert-tertiary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-tertiary-disabled-border": "rgba(from var(--sjs2-color-border-alert-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-alert-tertiary-disabled-icon": "var(--sjs2-color-fg-alert-primary-disabled)",
+        "--sjs2-color-control-action-alert-tertiary-disabled-label": "var(--sjs2-color-fg-alert-primary-disabled)",
+        "--sjs2-color-control-action-brand-primary-default-bg": "var(--sjs2-color-bg-brand-primary)",
+        "--sjs2-color-control-action-brand-primary-default-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-primary-default-icon": "var(--sjs2-color-fg-brand-on-primary)",
+        "--sjs2-color-control-action-brand-primary-default-label": "var(--sjs2-color-fg-brand-on-primary)",
+        "--sjs2-color-control-action-brand-primary-hovered-bg": "var(--sjs2-color-bg-brand-primary-dim)",
+        "--sjs2-color-control-action-brand-primary-hovered-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-primary-hovered-icon": "var(--sjs2-color-fg-brand-on-primary)",
+        "--sjs2-color-control-action-brand-primary-hovered-label": "var(--sjs2-color-fg-brand-on-primary)",
+        "--sjs2-color-control-action-brand-primary-pressed-bg": "var(--sjs2-color-bg-brand-primary)",
+        "--sjs2-color-control-action-brand-primary-pressed-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-primary-pressed-icon": "var(--sjs2-color-fg-brand-on-primary)",
+        "--sjs2-color-control-action-brand-primary-pressed-label": "var(--sjs2-color-fg-brand-on-primary)",
+        "--sjs2-color-control-action-brand-primary-disabled-bg": "var(--sjs2-color-bg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-primary-disabled-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-primary-disabled-icon": "var(--sjs2-color-fg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-primary-disabled-label": "var(--sjs2-color-fg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-secondary-default-bg": "var(--sjs2-color-bg-brand-secondary)",
+        "--sjs2-color-control-action-brand-secondary-default-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-secondary-default-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-secondary-default-label": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-secondary-hovered-bg": "var(--sjs2-color-bg-brand-secondary-dim)",
+        "--sjs2-color-control-action-brand-secondary-hovered-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-secondary-hovered-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-secondary-hovered-label": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-secondary-pressed-bg": "var(--sjs2-color-bg-brand-secondary)",
+        "--sjs2-color-control-action-brand-secondary-pressed-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-secondary-pressed-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-secondary-pressed-label": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-secondary-disabled-bg": "var(--sjs2-color-bg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-secondary-disabled-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-secondary-disabled-icon": "var(--sjs2-color-fg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-secondary-disabled-label": "var(--sjs2-color-fg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-tertiary-default-bg": "var(--sjs2-color-bg-brand-tertiary)",
+        "--sjs2-color-control-action-brand-tertiary-default-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-tertiary-default-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-tertiary-default-label": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-tertiary-hovered-bg": "var(--sjs2-color-bg-brand-tertiary-dim)",
+        "--sjs2-color-control-action-brand-tertiary-hovered-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-tertiary-hovered-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-tertiary-hovered-label": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-tertiary-pressed-bg": "var(--sjs2-color-bg-brand-tertiary-dim)",
+        "--sjs2-color-control-action-brand-tertiary-pressed-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-tertiary-pressed-icon": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-tertiary-pressed-label": "var(--sjs2-color-fg-brand-primary)",
+        "--sjs2-color-control-action-brand-tertiary-disabled-bg": "rgba(from var(--sjs2-color-bg-brand-tertiary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-tertiary-disabled-border": "rgba(from var(--sjs2-color-border-brand-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-brand-tertiary-disabled-icon": "var(--sjs2-color-fg-brand-primary-disabled)",
+        "--sjs2-color-control-action-brand-tertiary-disabled-label": "var(--sjs2-color-fg-brand-primary-disabled)",
+        "--sjs2-color-control-action-accent-primary-default-bg": "var(--sjs2-color-bg-accent-primary)",
+        "--sjs2-color-control-action-accent-primary-default-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-primary-default-icon": "var(--sjs2-color-fg-accent-on-primary)",
+        "--sjs2-color-control-action-accent-primary-default-label": "var(--sjs2-color-fg-accent-on-primary)",
+        "--sjs2-color-control-action-accent-primary-hovered-bg": "var(--sjs2-color-bg-accent-primary-dim)",
+        "--sjs2-color-control-action-accent-primary-hovered-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-primary-hovered-icon": "var(--sjs2-color-fg-accent-on-primary)",
+        "--sjs2-color-control-action-accent-primary-hovered-label": "var(--sjs2-color-fg-accent-on-primary)",
+        "--sjs2-color-control-action-accent-primary-pressed-bg": "var(--sjs2-color-bg-accent-primary)",
+        "--sjs2-color-control-action-accent-primary-pressed-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-primary-pressed-icon": "var(--sjs2-color-fg-accent-on-primary)",
+        "--sjs2-color-control-action-accent-primary-pressed-label": "var(--sjs2-color-fg-accent-on-primary)",
+        "--sjs2-color-control-action-accent-primary-disabled-bg": "var(--sjs2-color-bg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-primary-disabled-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-primary-disabled-icon": "var(--sjs2-color-fg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-primary-disabled-label": "var(--sjs2-color-fg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-secondary-default-bg": "var(--sjs2-color-bg-accent-secondary)",
+        "--sjs2-color-control-action-accent-secondary-default-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-secondary-default-icon": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-secondary-default-label": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-secondary-hovered-bg": "var(--sjs2-color-bg-accent-secondary-dim)",
+        "--sjs2-color-control-action-accent-secondary-hovered-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-secondary-hovered-icon": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-secondary-hovered-label": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-secondary-pressed-bg": "var(--sjs2-color-bg-accent-secondary)",
+        "--sjs2-color-control-action-accent-secondary-pressed-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-secondary-pressed-icon": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-secondary-pressed-label": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-secondary-disabled-bg": "var(--sjs2-color-bg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-secondary-disabled-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-secondary-disabled-icon": "var(--sjs2-color-fg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-secondary-disabled-label": "var(--sjs2-color-fg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-tertiary-default-bg": "var(--sjs2-color-bg-accent-tertiary)",
+        "--sjs2-color-control-action-accent-tertiary-default-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-tertiary-default-icon": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-tertiary-default-label": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-tertiary-hovered-bg": "var(--sjs2-color-bg-accent-tertiary-dim)",
+        "--sjs2-color-control-action-accent-tertiary-hovered-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-tertiary-hovered-icon": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-tertiary-hovered-label": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-tertiary-pressed-bg": "var(--sjs2-color-bg-accent-tertiary-dim)",
+        "--sjs2-color-control-action-accent-tertiary-pressed-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-tertiary-pressed-icon": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-tertiary-pressed-label": "var(--sjs2-color-fg-accent-primary)",
+        "--sjs2-color-control-action-accent-tertiary-disabled-bg": "rgba(from var(--sjs2-color-bg-accent-tertiary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-tertiary-disabled-border": "rgba(from var(--sjs2-color-border-accent-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-accent-tertiary-disabled-icon": "var(--sjs2-color-fg-accent-primary-disabled)",
+        "--sjs2-color-control-action-accent-tertiary-disabled-label": "var(--sjs2-color-fg-accent-primary-disabled)",
+        "--sjs2-color-control-action-neutral-primary-default-bg": "var(--sjs2-color-bg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-primary-default-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-primary-default-icon": "var(--sjs2-color-fg-neutral-on-primary)",
+        "--sjs2-color-control-action-neutral-primary-default-label": "var(--sjs2-color-fg-neutral-on-primary)",
+        "--sjs2-color-control-action-neutral-primary-hovered-bg": "var(--sjs2-color-bg-neutral-primary-dim)",
+        "--sjs2-color-control-action-neutral-primary-hovered-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-primary-hovered-icon": "var(--sjs2-color-fg-neutral-on-primary)",
+        "--sjs2-color-control-action-neutral-primary-hovered-label": "var(--sjs2-color-fg-neutral-on-primary)",
+        "--sjs2-color-control-action-neutral-primary-pressed-bg": "var(--sjs2-color-bg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-primary-pressed-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-primary-pressed-icon": "var(--sjs2-color-fg-neutral-on-primary)",
+        "--sjs2-color-control-action-neutral-primary-pressed-label": "var(--sjs2-color-fg-neutral-on-primary)",
+        "--sjs2-color-control-action-neutral-primary-disabled-bg": "var(--sjs2-color-bg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-primary-disabled-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-primary-disabled-icon": "var(--sjs2-color-fg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-primary-disabled-label": "var(--sjs2-color-fg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-secondary-default-bg": "var(--sjs2-color-bg-neutral-secondary)",
+        "--sjs2-color-control-action-neutral-secondary-default-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-secondary-default-icon": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-secondary-default-label": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-secondary-hovered-bg": "var(--sjs2-color-bg-neutral-secondary-dim)",
+        "--sjs2-color-control-action-neutral-secondary-hovered-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-secondary-hovered-icon": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-secondary-hovered-label": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-secondary-pressed-bg": "var(--sjs2-color-bg-neutral-secondary)",
+        "--sjs2-color-control-action-neutral-secondary-pressed-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-secondary-pressed-icon": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-secondary-pressed-label": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-secondary-disabled-bg": "var(--sjs2-color-bg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-secondary-disabled-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-secondary-disabled-icon": "var(--sjs2-color-fg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-secondary-disabled-label": "var(--sjs2-color-fg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-tertiary-default-bg": "var(--sjs2-color-bg-neutral-tertiary)",
+        "--sjs2-color-control-action-neutral-tertiary-default-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-tertiary-default-icon": "var(--sjs2-color-fg-neutral-primary-muted)",
+        "--sjs2-color-control-action-neutral-tertiary-default-label": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-tertiary-hovered-bg": "var(--sjs2-color-bg-neutral-tertiary-dim)",
+        "--sjs2-color-control-action-neutral-tertiary-hovered-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-tertiary-hovered-icon": "var(--sjs2-color-fg-neutral-primary-muted)",
+        "--sjs2-color-control-action-neutral-tertiary-hovered-label": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-tertiary-pressed-bg": "var(--sjs2-color-bg-neutral-tertiary-dim)",
+        "--sjs2-color-control-action-neutral-tertiary-pressed-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-tertiary-pressed-icon": "var(--sjs2-color-fg-neutral-primary-muted)",
+        "--sjs2-color-control-action-neutral-tertiary-pressed-label": "var(--sjs2-color-fg-neutral-primary)",
+        "--sjs2-color-control-action-neutral-tertiary-disabled-bg": "rgba(from var(--sjs2-color-bg-neutral-tertiary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-tertiary-disabled-border": "rgba(from var(--sjs2-color-border-neutral-primary) r g b / var(--sjs2-opacity-hidden))",
+        "--sjs2-color-control-action-neutral-tertiary-disabled-icon": "var(--sjs2-color-fg-neutral-primary-disabled)",
+        "--sjs2-color-control-action-neutral-tertiary-disabled-label": "var(--sjs2-color-fg-neutral-primary-disabled)",
+        "--sjs2-color-data-chart-bg-color-1": "#84CAD4",
+        "--sjs2-color-data-chart-bg-color-2": "#3A99FB",
+        "--sjs2-color-data-chart-bg-color-3": "#FF6771",
+        "--sjs2-color-data-chart-bg-color-4": "#1DB496",
+        "--sjs2-color-data-chart-bg-color-5": "#FFC152",
+        "--sjs2-color-data-chart-bg-color-6": "#ABA1FF",
+        "--sjs2-color-data-chart-bg-color-7": "#7D8CA5",
+        "--sjs2-color-data-chart-bg-color-8": "#4FC46C",
+        "--sjs2-color-data-chart-bg-color-9": "#E87BCB",
+        "--sjs2-color-data-chart-bg-color-10": "#4E6198",
+        "--sjs2-color-data-chart-bg-color-1-tinted": "rgba(from #84CAD4 r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-2-tinted": "rgba(from #3A99FB r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-3-tinted": "rgba(from #FF6771 r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-4-tinted": "rgba(from #1DB496 r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-5-tinted": "rgba(from #FFC152 r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-6-tinted": "rgba(from #ABA1FF r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-7-tinted": "rgba(from #7D8CA5 r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-8-tinted": "rgba(from #4FC46C r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-9-tinted": "rgba(from #E87BCB r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-bg-color-10-tinted": "rgba(from #4E6198 r g b / var(--sjs2-opacity-x060))",
+        "--sjs2-color-data-chart-fg-on-color-1": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-2": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-3": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-4": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-5": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-6": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-7": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-8": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-9": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-fg-on-color-10": "var(--sjs2-palette-gray-000)",
+        "--sjs2-color-data-chart-border-color-1": "#84CAD4",
+        "--sjs2-color-data-chart-border-color-2": "#3A99FB",
+        "--sjs2-color-data-chart-border-color-3": "#FF6771",
+        "--sjs2-color-data-chart-border-color-4": "#1DB496",
+        "--sjs2-color-data-chart-border-color-5": "#FFC152",
+        "--sjs2-color-data-chart-border-color-6": "#ABA1FF",
+        "--sjs2-color-data-chart-border-color-7": "#7D8CA5",
+        "--sjs2-color-data-chart-border-color-8": "#4FC46C",
+        "--sjs2-color-data-chart-border-color-9": "#E87BCB",
+        "--sjs2-color-data-chart-border-color-10": "#4E6198",
+        "--sjs2-color-data-grid-fg-label": "var(--sjs2-color-fg-basic-primary)",
+        "--sjs2-color-data-grid-border-line": "#DCDCDC",
+        "--sjs2-color-data-grid-border-axis": "var(--sjs2-color-border-basic-primary)",
+        "--sjs2-opacity-visible": "var(--sjs2-opacity-x100)",
+        "--sjs2-opacity-hovered": "var(--sjs2-opacity-x100)",
+        "--sjs2-opacity-pressed": "var(--sjs2-opacity-x100)",
+        "--sjs2-opacity-disabled": "var(--sjs2-opacity-x025)",
+        "--sjs2-opacity-hidden": "var(--sjs2-opacity-x000)",
+        "--sjs2-border-width-default": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-width-a11y": "var(--sjs2-border-width-x400)",
+        "--sjs2-border-spread-form-default": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-form-hovered": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-form-pressed": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-form-focused": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-form-highlighted": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-form-disabled": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-form-invalid": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-form-readonly": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-form-design": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-trigger-default": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-trigger-hovered": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-trigger-pressed": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-trigger-focused": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-trigger-disabled": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-trigger-design": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-surface-default": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-surface-hovered": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-surface-pressed": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-surface-focused": "var(--sjs2-border-width-x200)",
+        "--sjs2-border-spread-surface-disabled": "var(--sjs2-border-width-x100)",
+        "--sjs2-border-spread-surface-dragging": "4px",
+        "--sjs2-border-spread-elevated-default": "0px",
+        "--sjs2-border-spread-floating-default": "0px",
+        "--sjs2-border-blur-form-default": "0px",
+        "--sjs2-border-blur-form-hovered": "0px",
+        "--sjs2-border-blur-form-pressed": "0px",
+        "--sjs2-border-blur-form-focused": "0px",
+        "--sjs2-border-blur-form-highlighted": "0px",
+        "--sjs2-border-blur-form-disabled": "0px",
+        "--sjs2-border-blur-form-invalid": "0px",
+        "--sjs2-border-blur-form-readonly": "0px",
+        "--sjs2-border-blur-form-design": "0px",
+        "--sjs2-border-blur-trigger-default": "0px",
+        "--sjs2-border-blur-trigger-hovered": "0px",
+        "--sjs2-border-blur-trigger-pressed": "0px",
+        "--sjs2-border-blur-trigger-focused": "0px",
+        "--sjs2-border-blur-trigger-disabled": "0px",
+        "--sjs2-border-blur-trigger-design": "0px",
+        "--sjs2-border-blur-surface-default": "4px",
+        "--sjs2-border-blur-surface-hovered": "0px",
+        "--sjs2-border-blur-surface-pressed": "0px",
+        "--sjs2-border-blur-surface-focused": "0px",
+        "--sjs2-border-blur-surface-disabled": "0px",
+        "--sjs2-border-blur-surface-dragging": "12px",
+        "--sjs2-border-blur-elevated-default": "12px",
+        "--sjs2-border-blur-floating-default": "20px",
+        "--sjs2-border-offset-x-form-default": "0px",
+        "--sjs2-border-offset-x-form-hovered": "0px",
+        "--sjs2-border-offset-x-form-pressed": "0px",
+        "--sjs2-border-offset-x-form-focused": "0px",
+        "--sjs2-border-offset-x-form-highlighted": "0px",
+        "--sjs2-border-offset-x-form-disabled": "0px",
+        "--sjs2-border-offset-x-form-invalid": "0px",
+        "--sjs2-border-offset-x-form-readonly": "0px",
+        "--sjs2-border-offset-x-form-design": "0px",
+        "--sjs2-border-offset-x-trigger-default": "0px",
+        "--sjs2-border-offset-x-trigger-hovered": "0px",
+        "--sjs2-border-offset-x-trigger-pressed": "0px",
+        "--sjs2-border-offset-x-trigger-focused": "0px",
+        "--sjs2-border-offset-x-trigger-disabled": "0px",
+        "--sjs2-border-offset-x-trigger-design": "0px",
+        "--sjs2-border-offset-x-surface-default": "0px",
+        "--sjs2-border-offset-x-surface-hovered": "0px",
+        "--sjs2-border-offset-x-surface-pressed": "0px",
+        "--sjs2-border-offset-x-surface-focused": "0px",
+        "--sjs2-border-offset-x-surface-disabled": "0px",
+        "--sjs2-border-offset-x-surface-dragging": "0px",
+        "--sjs2-border-offset-x-elevated-default": "0px",
+        "--sjs2-border-offset-x-floating-default": "0px",
+        "--sjs2-border-offset-y-form-default": "0px",
+        "--sjs2-border-offset-y-form-hovered": "0px",
+        "--sjs2-border-offset-y-form-pressed": "0px",
+        "--sjs2-border-offset-y-form-focused": "0px",
+        "--sjs2-border-offset-y-form-highlighted": "0px",
+        "--sjs2-border-offset-y-form-disabled": "0px",
+        "--sjs2-border-offset-y-form-invalid": "0px",
+        "--sjs2-border-offset-y-form-readonly": "0px",
+        "--sjs2-border-offset-y-form-design": "0px",
+        "--sjs2-border-offset-y-trigger-default": "0px",
+        "--sjs2-border-offset-y-trigger-hovered": "0px",
+        "--sjs2-border-offset-y-trigger-pressed": "0px",
+        "--sjs2-border-offset-y-trigger-focused": "0px",
+        "--sjs2-border-offset-y-trigger-disabled": "0px",
+        "--sjs2-border-offset-y-trigger-design": "0px",
+        "--sjs2-border-offset-y-surface-default": "2px",
+        "--sjs2-border-offset-y-surface-hovered": "0px",
+        "--sjs2-border-offset-y-surface-pressed": "0px",
+        "--sjs2-border-offset-y-surface-focused": "0px",
+        "--sjs2-border-offset-y-surface-disabled": "0px",
+        "--sjs2-border-offset-y-surface-dragging": "6px",
+        "--sjs2-border-offset-y-elevated-default": "4px",
+        "--sjs2-border-offset-y-floating-default": "6px"
+    }
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DefaultLight);
+
+
+/***/ }),
+
+/***/ "./src/utils/dropdownActionWidget.ts":
+/*!*******************************************!*\
+  !*** ./src/utils/dropdownActionWidget.ts ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ActionDropdownWidget: () => (/* binding */ ActionDropdownWidget)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/utils/helpers.ts");
+/* harmony import */ var _dropdownBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdownBase */ "./src/utils/dropdownBase.ts");
+
+
+var ActionDropdownWidget = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ActionDropdownWidget, _super);
+    function ActionDropdownWidget(options) {
+        var _a;
+        var _this = _super.call(this, (_a = options.className) !== null && _a !== void 0 ? _a : "sa-action-dropdown") || this;
+        _this.options = options;
+        return _this;
+    }
+    Object.defineProperty(ActionDropdownWidget.prototype, "direction", {
+        get: function () {
+            var _a;
+            return (_a = this.options.direction) !== null && _a !== void 0 ? _a : "down";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ActionDropdownWidget.prototype.createHeader = function () {
+        var header = document.createElement("div");
+        header.className = this.className + "-header";
+        header.setAttribute("tabindex", "0");
+        header.setAttribute("role", "button");
+        header.setAttribute("aria-haspopup", "listbox");
+        header.setAttribute("aria-expanded", "false");
+        header.setAttribute("aria-label", this.getTitleText());
+        var headerContent = document.createElement("div");
+        headerContent.className = this.className + "-header-content";
+        this.headerText = document.createElement("span");
+        this.headerText.className = this.className + "-title";
+        this.headerText.textContent = this.getTitleText();
+        headerContent.appendChild(this.headerText);
+        header.appendChild(headerContent);
+        if (this.options.showArrow !== false) {
+            header.appendChild(this.createArrow());
+        }
+        return header;
+    };
+    ActionDropdownWidget.prototype.getTitleText = function () {
+        var title = this.options.title;
+        return !!title && (typeof title === "string" ? title : title());
+    };
+    ActionDropdownWidget.prototype.getOptions = function () {
+        var optionsSource = this.options.options || [];
+        return Array.isArray(optionsSource) ? optionsSource : optionsSource();
+    };
+    ActionDropdownWidget.prototype.isOptionSelected = function (option) {
+        return this.options.isSelected(option);
+    };
+    ActionDropdownWidget.prototype.onOptionSelect = function (option, dropdownItem) {
+        if (this.options.handler(option.value)) {
+            this.hidePopup();
+        }
+        this.updateItemSelection();
+        this.updateHeaderLabel();
+    };
+    ActionDropdownWidget.prototype.onBeforePopupShow = function () {
+        if (this.direction === "up") {
+            this.dropdownList.classList.add(this.className + "--up");
+        }
+        this.updateOptions();
+    };
+    ActionDropdownWidget.prototype.updateHeaderLabel = function () {
+        var titleText = this.getTitleText();
+        this.dropdownHeader.setAttribute("aria-label", titleText);
+        this.headerText.innerText = titleText;
+    };
+    ActionDropdownWidget.prototype.updateSelect = function () {
+        this.updateOptions();
+        this.updateHeaderLabel();
+    };
+    ActionDropdownWidget.prototype.attachMethodsToElement = function () {
+        var _this = this;
+        this.dropdownElement._handleClickOutside = this.handleClickOutsideRef;
+        this.dropdownElement.setValues = function (values) { return _this.setValues(values); };
+        this.dropdownElement.getValues = function () { return _this.getValues(); };
+        this.dropdownElement.__updateSelect = function () { return _this.updateSelect(); };
+    };
+    ActionDropdownWidget.prototype.setValues = function (values) {
+        this.updateHeaderLabel();
+    };
+    ActionDropdownWidget.prototype.getValues = function () {
+        var _this = this;
+        return this.optionItems.filter(function (option) { return _this.options.isSelected(option); }).map(function (option) { return option.value; });
+    };
+    return ActionDropdownWidget;
+}(_dropdownBase__WEBPACK_IMPORTED_MODULE_1__.DropdownBase));
+
+
+
+/***/ }),
+
+/***/ "./src/utils/dropdownBase.ts":
+/*!***********************************!*\
+  !*** ./src/utils/dropdownBase.ts ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DropdownBase: () => (/* binding */ DropdownBase)
+/* harmony export */ });
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! . */ "./src/utils/index.ts");
+
+var DropdownBase = /** @class */ (function () {
+    function DropdownBase(defaultClassName) {
+        this.optionItems = [];
+        this.currentFocusIndex = -1;
+        this.className = defaultClassName;
+        this.dropdownOpenedClass = this.className + "--opened";
+        this.itemClassSelected = this.className + "-item--selected";
+    }
+    Object.defineProperty(DropdownBase.prototype, "isOpen", {
+        get: function () {
+            return this.dropdownHeader.classList.contains(this.dropdownOpenedClass);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DropdownBase.prototype.render = function () {
+        this.dropdownElement = this.createDropdownElement();
+        this.dropdownHeader = this.createHeader();
+        this.dropdownList = this.createList();
+        this.dropdownContainer = this.createContainer();
+        this.dropdownContainer.appendChild(this.dropdownHeader);
+        this.dropdownContainer.appendChild(this.dropdownList);
+        this.dropdownElement.appendChild(this.dropdownContainer);
+        this.bindEvents();
+        this.attachMethodsToElement();
+        this.updateSelect();
+        return this.dropdownElement;
+    };
+    DropdownBase.prototype.createDropdownElement = function () {
+        var element = document.createElement("div");
+        element.className = this.className;
+        return element;
+    };
+    DropdownBase.prototype.createList = function () {
+        var list = document.createElement("ul");
+        list.className = this.className + "-list";
+        list.setAttribute("role", "listbox");
+        return list;
+    };
+    DropdownBase.prototype.createContainer = function () {
+        var container = document.createElement("div");
+        container.className = this.className + "-container";
+        return container;
+    };
+    DropdownBase.prototype.createArrow = function (arrowClassName) {
+        var arrowElement = document.createElement("div");
+        arrowElement.className = arrowClassName !== null && arrowClassName !== void 0 ? arrowClassName : this.className + "-arrow";
+        arrowElement.appendChild(___WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgElement("chevrondown-24x24"));
+        return arrowElement;
+    };
+    DropdownBase.prototype.showPopup = function () {
+        this.updateItemSelection();
+        this.dropdownHeader.classList.add(this.dropdownOpenedClass);
+        this.dropdownList.classList.add(this.dropdownOpenedClass);
+        this.dropdownHeader.setAttribute("aria-expanded", "true");
+        this.onDropdownOpened();
+    };
+    DropdownBase.prototype.hidePopup = function () {
+        this.dropdownHeader.classList.remove(this.dropdownOpenedClass);
+        this.dropdownList.classList.remove(this.dropdownOpenedClass);
+        this.dropdownHeader.setAttribute("aria-expanded", "false");
+        this.currentFocusIndex = -1;
+    };
+    DropdownBase.prototype.focusItem = function (index, updateAriaSelected) {
+        var _this = this;
+        if (updateAriaSelected === void 0) { updateAriaSelected = false; }
+        var items = this.dropdownList.querySelectorAll("." + this.className + "-item");
+        if (items.length === 0)
+            return;
+        items.forEach(function (item) {
+            item.classList.remove(_this.className + "-item--focused");
+            if (updateAriaSelected) {
+                item.setAttribute("aria-selected", "false");
+            }
+        });
+        if (index < 0)
+            index = items.length - 1;
+        if (index >= items.length)
+            index = 0;
+        this.currentFocusIndex = index;
+        var itemToFocus = items[this.currentFocusIndex];
+        itemToFocus.classList.add(this.className + "-item--focused");
+        if (updateAriaSelected) {
+            itemToFocus.setAttribute("aria-selected", "true");
+        }
+        itemToFocus.scrollIntoView({ block: "nearest" });
+    };
+    DropdownBase.prototype.updateOptions = function () {
+        var _this = this;
+        this.dropdownList.innerHTML = "";
+        this.optionItems = this.getOptions();
+        this.optionItems.forEach(function (option) {
+            var dropdownItem = _this.createOptionItem(option);
+            _this.dropdownList.appendChild(dropdownItem);
+        });
+    };
+    DropdownBase.prototype.createOptionItem = function (option) {
+        var _this = this;
+        var dropdownItem = document.createElement("li");
+        dropdownItem.className = this.className + "-item";
+        if (option.title) {
+            dropdownItem.title = option.title;
+        }
+        dropdownItem.dataset.value = option.value;
+        dropdownItem.setAttribute("role", "option");
+        dropdownItem.setAttribute("tabindex", "-1");
+        dropdownItem.id = "".concat(this.className, "-item-").concat(option.value);
+        if (option.icon) {
+            var iconContainer = document.createElement("div");
+            iconContainer.className = this.className + "-icon";
+            iconContainer.appendChild(___WEBPACK_IMPORTED_MODULE_0__.DocumentHelper.createSvgElement(option.icon));
+            dropdownItem.appendChild(iconContainer);
+        }
+        var textSpan = document.createElement("span");
+        textSpan.textContent = option.text;
+        dropdownItem.appendChild(textSpan);
+        if (this.isOptionSelected(option)) {
+            dropdownItem.classList.add(this.itemClassSelected);
+            dropdownItem.setAttribute("aria-selected", "true");
+        }
+        else {
+            dropdownItem.setAttribute("aria-selected", "false");
+        }
+        dropdownItem.addEventListener("click", function (e) { return _this.handleOptionClick(e, option, dropdownItem); });
+        return dropdownItem;
+    };
+    DropdownBase.prototype.handleOptionClick = function (e, option, dropdownItem) {
+        this.onOptionSelect(option, dropdownItem);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    DropdownBase.prototype.handleKeyDown = function (e) {
+        if (!this.isOpen) {
+            if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+                e.preventDefault();
+                this.showPopup();
+                this.onOpenedByKeyboard();
+            }
+            return;
+        }
+        var items = this.dropdownList.querySelectorAll("." + this.className + "-item");
+        if (items.length === 0)
+            return;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                this.focusItem(this.currentFocusIndex + 1, this.shouldUpdateAriaSelectedOnFocus());
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                this.focusItem(this.currentFocusIndex - 1, this.shouldUpdateAriaSelectedOnFocus());
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (this.currentFocusIndex >= 0 && this.currentFocusIndex < items.length) {
+                    var selectedItem = items[this.currentFocusIndex];
+                    var value_1 = selectedItem.dataset.value;
+                    if (value_1) {
+                        var option = this.optionItems.find(function (opt) { return opt.value === value_1; });
+                        if (option) {
+                            this.onOptionSelect(option, selectedItem);
+                        }
+                    }
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                this.hidePopup();
+                break;
+        }
+    };
+    DropdownBase.prototype.handleClickOutside = function (event) {
+        if (!this.dropdownElement.contains(event.target)) {
+            this.hidePopup();
+        }
+    };
+    DropdownBase.prototype.bindEvents = function () {
+        var _this = this;
+        this.handleClickOutsideRef = function (e) { return _this.handleClickOutside(e); };
+        this.dropdownHeader.addEventListener("click", function (e) { return _this.handleHeaderClick(e); });
+        this.dropdownHeader.addEventListener("keydown", function (e) { return _this.handleKeyDown(e); });
+        this.dropdownList.addEventListener("keydown", function (e) { return _this.handleKeyDown(e); });
+        document.addEventListener("click", this.handleClickOutsideRef);
+    };
+    DropdownBase.prototype.handleHeaderClick = function (e) {
+        if (this.isOpen) {
+            this.hidePopup();
+        }
+        else {
+            this.onBeforePopupShow();
+            var parentContainerWidth = this.dropdownContainer.getBoundingClientRect().width;
+            this.dropdownList.style.minWidth = "".concat(parentContainerWidth, "px");
+            this.showPopup();
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    DropdownBase.prototype.onBeforePopupShow = function () { };
+    DropdownBase.prototype.onOpenedByKeyboard = function () { };
+    DropdownBase.prototype.onDropdownOpened = function () { };
+    DropdownBase.prototype.updateItemSelection = function () {
+        var _this = this;
+        this.dropdownList.querySelectorAll("." + this.className + "-item").forEach(function (item) {
+            var value = item.dataset.value;
+            var option = _this.optionItems.find(function (o) { return o.value === value; });
+            if (option) {
+                var selected = _this.isOptionSelected(option);
+                if (selected) {
+                    item.classList.add(_this.itemClassSelected);
+                    item.setAttribute("aria-selected", "true");
+                }
+                else {
+                    item.classList.remove(_this.itemClassSelected);
+                    item.setAttribute("aria-selected", "false");
+                }
+            }
+        });
+    };
+    DropdownBase.prototype.shouldUpdateAriaSelectedOnFocus = function () {
+        return false;
+    };
+    return DropdownBase;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/utils/dropdownWidget.ts":
+/*!*************************************!*\
+  !*** ./src/utils/dropdownWidget.ts ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DropdownWidget: () => (/* binding */ DropdownWidget)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/utils/helpers.ts");
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! . */ "./src/utils/index.ts");
+/* harmony import */ var _dropdownBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdownBase */ "./src/utils/dropdownBase.ts");
+
+
+
+var DropdownWidget = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(DropdownWidget, _super);
+    function DropdownWidget(options) {
+        var _a, _b;
+        var _this = _super.call(this, (_a = options.className) !== null && _a !== void 0 ? _a : "sa-dropdown") || this;
+        _this.selectedOption = null;
+        _this.options = options;
+        _this.optionsSource = options.options || [];
+        _this.placeholder = (_b = options.placeholder) !== null && _b !== void 0 ? _b : "Select...";
+        return _this;
+    }
+    DropdownWidget.prototype.createHeader = function () {
+        var header = document.createElement("div");
+        header.className = this.className + "-header";
+        header.setAttribute("tabindex", "0");
+        header.setAttribute("role", "button");
+        header.setAttribute("aria-haspopup", "listbox");
+        header.setAttribute("aria-expanded", "false");
+        this.headerContent = document.createElement("div");
+        this.headerContent.className = this.className + "-header-content";
+        header.appendChild(this.headerContent);
+        this.createResetButton(header);
+        var arrowElement = this.createArrow(this.className + "-action " + this.className + "-arrow");
+        header.appendChild(arrowElement);
+        return header;
+    };
+    DropdownWidget.prototype.createResetButton = function (header) {
+        var _this = this;
+        if (!this.options.resetHandler)
+            return;
+        var resetElement = document.createElement("div");
+        resetElement.className = this.className + "-action " + this.className + "-reset";
+        resetElement.appendChild(___WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createSvgElement("cancel_24x24"));
+        header.appendChild(resetElement);
+        resetElement.addEventListener("click", function (e) {
+            _this.options.resetHandler();
+            e.preventDefault();
+            e.stopPropagation();
+        });
+    };
+    DropdownWidget.prototype.updateTitle = function () {
+        if (!this.titleElement) {
+            this.titleElement = ___WEBPACK_IMPORTED_MODULE_1__.DocumentHelper.createElement("span", this.className + "__title");
+        }
+        var title = this.options.title;
+        var titleText = !!title && (typeof title === "string" ? title : title());
+        this.titleElement.innerText = titleText !== null && titleText !== void 0 ? titleText : "";
+        if (!!titleText) {
+            this.dropdownElement.insertBefore(this.titleElement, this.dropdownContainer);
+        }
+        else if (this.titleElement.parentElement === this.dropdownElement) {
+            this.dropdownElement.removeChild(this.titleElement);
+        }
+    };
+    DropdownWidget.prototype.getOptions = function () {
+        var opts = this.optionsSource || [];
+        return Array.isArray(opts) ? opts : opts();
+    };
+    DropdownWidget.prototype.isOptionSelected = function (option) {
+        return this.options.isSelected(option);
+    };
+    DropdownWidget.prototype.onOptionSelect = function (option, dropdownItem) {
+        this.selectedOption = option;
+        this.options.handler(option.value, option);
+        this.updateHeaderContent();
+        this.hidePopup();
+    };
+    DropdownWidget.prototype.onBeforePopupShow = function () {
+        this.dropdownList.style.width = "auto";
+    };
+    DropdownWidget.prototype.onDropdownOpened = function () {
+        var documentWidth = document.body.clientWidth;
+        var menuRect = this.dropdownList.getBoundingClientRect();
+        if (menuRect.left + menuRect.width > documentWidth - 20) {
+            this.dropdownList.style.width = "".concat(documentWidth - menuRect.left - 40, "px");
+        }
+        var panelContainer = this.dropdownElement.closest(".sa-visualizer");
+        if (panelContainer) {
+            var panelContainerRect = panelContainer.getBoundingClientRect();
+            if ((menuRect.y + menuRect.height) > (panelContainerRect.y + panelContainerRect.height)) {
+                this.dropdownList.style.height = "".concat(panelContainerRect.height - menuRect.y + panelContainerRect.y, "px");
+            }
+        }
+    };
+    DropdownWidget.prototype.onOpenedByKeyboard = function () {
+        var _this = this;
+        setTimeout(function () { return _this.focusItem(0, true); }, 0);
+    };
+    DropdownWidget.prototype.shouldUpdateAriaSelectedOnFocus = function () {
+        return true;
+    };
+    DropdownWidget.prototype.updateHeaderContent = function () {
+        var _this = this;
+        var _a, _b;
+        this.headerContent.innerHTML = "";
+        this.optionItems = this.getOptions();
+        this.selectedOption = (_a = this.optionItems.find(function (option) { return _this.options.isSelected(option); })) !== null && _a !== void 0 ? _a : null;
+        if (this.selectedOption) {
+            this.dropdownHeader.setAttribute("aria-label", "Selected: ".concat(this.selectedOption.text));
+        }
+        else {
+            this.dropdownHeader.setAttribute("aria-label", this.placeholder);
+        }
+        if ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.icon) {
+            var headerIcon = document.createElement("div");
+            headerIcon.className = this.className + "-header-icon";
+            headerIcon.innerHTML = this.selectedOption.icon;
+            this.headerContent.appendChild(headerIcon);
+        }
+        var headerText = document.createElement("span");
+        headerText.className = this.selectedOption ? this.className + "-header-text" : this.className + "-placeholder";
+        headerText.textContent = this.selectedOption ? this.selectedOption.text : this.placeholder;
+        this.headerContent.appendChild(headerText);
+    };
+    DropdownWidget.prototype.updateSelect = function () {
+        this.updateTitle();
+        this.updateHeaderContent();
+        this.updateOptions();
+    };
+    DropdownWidget.prototype.attachMethodsToElement = function () {
+        var _this = this;
+        this.dropdownElement._handleClickOutside = this.handleClickOutsideRef;
+        this.dropdownElement.setValue = function (value) { return _this.setValue(value); };
+        this.dropdownElement.getValue = function () { return _this.getValue(); };
+        this.dropdownElement.__updateSelect = function () { return _this.updateSelect(); };
+        this.dropdownElement.__updateHeader = function () { return _this.updateHeaderContent(); };
+    };
+    DropdownWidget.prototype.setValue = function (value) {
+        var items = this.getOptions();
+        var optionToSelect = items.find(function (opt) { return opt.value === value; });
+        this.selectedOption = optionToSelect || null;
+        this.updateHeaderContent();
+    };
+    DropdownWidget.prototype.getValue = function () {
+        return this.selectedOption ? this.selectedOption.value : null;
+    };
+    return DropdownWidget;
+}(_dropdownBase__WEBPACK_IMPORTED_MODULE_2__.DropdownBase));
+
+
+
 /***/ }),
 
 /***/ "./src/utils/helpers.ts":
@@ -5897,12 +8155,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   createImagesContainer: () => (/* binding */ createImagesContainer),
 /* harmony export */   createLinksContainer: () => (/* binding */ createLinksContainer),
 /* harmony export */   createLoadingIndicator: () => (/* binding */ createLoadingIndicator),
+/* harmony export */   getDiffsFromDefaults: () => (/* binding */ getDiffsFromDefaults),
 /* harmony export */   options: () => (/* binding */ options),
 /* harmony export */   toPrecision: () => (/* binding */ toPrecision)
 /* harmony export */ });
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _localizationManager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../localizationManager */ "./src/localizationManager.ts");
+/* harmony import */ var _dropdownWidget__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdownWidget */ "./src/utils/dropdownWidget.ts");
+/* harmony import */ var _dropdownActionWidget__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./dropdownActionWidget */ "./src/utils/dropdownActionWidget.ts");
+
+
 
 
 var DocumentHelper = /** @class */ (function () {
@@ -5946,14 +8209,80 @@ var DocumentHelper = /** @class */ (function () {
         selectWrapper["__updateSelect"]();
         return selectWrapper;
     };
-    DocumentHelper.createButton = function (handler, text, className) {
+    /**
+     * Creates a custom dropdown element with icon support
+     * @param options - Configuration object for the dropdown
+     * @returns Created dropdown element
+     */
+    DocumentHelper.createDropdown = function (options) {
+        var widget = new _dropdownWidget__WEBPACK_IMPORTED_MODULE_2__.DropdownWidget(options);
+        return widget.render();
+    };
+    DocumentHelper.createActionDropdown = function (options) {
+        var widget = new _dropdownActionWidget__WEBPACK_IMPORTED_MODULE_3__.ActionDropdownWidget(options);
+        return widget.render();
+    };
+    /**
+     * Destroys dropdown and removes all event handlers
+     * @param {HTMLElement} dropdownElement - Root dropdown element
+     */
+    DocumentHelper.destroyDropdown = function (dropdownElement) {
+        if (dropdownElement && dropdownElement._handleClickOutside) {
+            document.removeEventListener("click", dropdownElement._handleClickOutside);
+            dropdownElement._handleClickOutside = null;
+        }
+        if (dropdownElement && dropdownElement.parentNode) {
+            dropdownElement.parentNode.removeChild(dropdownElement);
+        }
+    };
+    // public static createButton(
+    //   handler: (e: any) => void,
+    //   text = "",
+    //   className = "sa-toolbar__button"
+    // ) {
+    //   const button = DocumentHelper.createElement("span", className, {
+    //     innerText: text,
+    //     onclick: handler,
+    //   });
+    //   return button;
+    // }
+    DocumentHelper.createButton = function (handler, text, className, icon) {
         if (text === void 0) { text = ""; }
         if (className === void 0) { className = "sa-toolbar__button"; }
-        var button = DocumentHelper.createElement("span", className, {
-            innerText: text,
-            onclick: handler,
+        var buttonElement = document.createElement("div");
+        buttonElement.className = className + (icon ? " " + className + "-with-icon" : "");
+        buttonElement.setAttribute("role", "button");
+        buttonElement.setAttribute("tabindex", "0");
+        if (icon) {
+            var svgElement = document.createElement("div");
+            svgElement.className = className + "-icon";
+            svgElement.appendChild(DocumentHelper.createSvgElement(icon));
+            buttonElement.appendChild(svgElement);
+        }
+        var buttonText = document.createElement("span");
+        buttonText.className = className + "-text";
+        buttonText.textContent = text;
+        buttonElement.appendChild(buttonText);
+        buttonElement.setText = function (newText) {
+            buttonText.textContent = newText;
+        };
+        buttonElement.addEventListener("click", function (e) {
+            handler(e);
+        });
+        buttonElement.addEventListener("keydown", function (e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handler(e);
+            }
+        });
+        return buttonElement;
+    };
+    DocumentHelper.setStyles = function (element, styles) {
+        if (!element || !styles)
+            return;
+        Object.keys(styles).forEach(function (property) {
+            element.style.setProperty(property, styles[property]);
         });
-        return button;
     };
     DocumentHelper.createElement = function (tagName, className, attrs) {
         if (className === void 0) { className = ""; }
@@ -5975,9 +8304,12 @@ var DocumentHelper = /** @class */ (function () {
         svgElem.appendChild(useElem);
         return svgElem;
     };
-    DocumentHelper.createSvgButton = function (path) {
+    DocumentHelper.createSvgButton = function (path, title) {
         var btn = (DocumentHelper.createElement("button", "sa-table__svg-button"));
         btn.appendChild(DocumentHelper.createSvgElement(path));
+        if (title) {
+            btn.title = title;
+        }
         return btn;
     };
     DocumentHelper.createSvgToggleButton = function (svgPath1, svPpath2, text1, text2, handler1, handler2, state, className) {
@@ -6022,6 +8354,29 @@ var DocumentHelper = /** @class */ (function () {
         });
         return el;
     };
+    DocumentHelper.createTextEditor = function (options) {
+        if (options === void 0) { options = {}; }
+        var _a = options.className, className = _a === void 0 ? "sa-table-filter" : _a, _b = options.placeholder, placeholder = _b === void 0 ? _localizationManager__WEBPACK_IMPORTED_MODULE_1__.localization.getString("filterPlaceholder") : _b, _c = options.inputValue, inputValue = _c === void 0 ? "" : _c, _d = options.showIcon, showIcon = _d === void 0 ? true : _d;
+        var editor = document.createElement("div");
+        editor.className = className;
+        if (showIcon) {
+            var iconContainer = DocumentHelper.createElement("div", className + "_icon");
+            var searchIcon = DocumentHelper.createSvgElement("search-24x24");
+            iconContainer.appendChild(searchIcon);
+            editor.appendChild(iconContainer);
+        }
+        var input = DocumentHelper.createElement("input", className + "_input", {
+            placeholder: placeholder,
+            defaultValue: inputValue,
+        });
+        input.onchange = function (e) {
+            if (!!options.onchange) {
+                options.onchange(input.value);
+            }
+        };
+        editor.appendChild(input);
+        return editor;
+    };
     return DocumentHelper;
 }());
 
@@ -6132,6 +8487,24 @@ function toPrecision(value, precision) {
     var base = Math.pow(10, precision);
     return Math.round(base * value) / base;
 }
+function getDiffsFromDefaults(obj, defaultObj) {
+    if (defaultObj === void 0) { defaultObj = {}; }
+    var result = {};
+    Object.keys(obj).forEach(function (key) {
+        if (typeof obj[key] === "object") {
+            var childDiffs = getDiffsFromDefaults(obj[key], defaultObj[key]);
+            if (Object.keys(childDiffs).length > 0) {
+                result[key] = childDiffs;
+            }
+        }
+        else {
+            if (obj[key] !== undefined && obj[key] != defaultObj[key]) {
+                result[key] = obj[key];
+            }
+        }
+    });
+    return result;
+}
 
 
 /***/ }),