@dhis2/analytics 20.6.2 → 21.0.0-alpha.1

package/build/es/components/FileMenu/FileMenu.js

@@ -127,16 +127,16 @@ export const FileMenu = ({
   const iconInactiveColor = colors.grey500;
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown,
-    className: "jsx-".concat(fileMenuStyles.__hash)
+    className: `jsx-${fileMenuStyles.__hash}`
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: fileMenuStyles.__hash
   }, fileMenuStyles), /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
-    className: "jsx-".concat(fileMenuStyles.__hash)
+    className: `jsx-${fileMenuStyles.__hash}`
   }, /*#__PURE__*/React.createElement("button", {
     onClick: toggleMenu,
     "data-test": "file-menu-toggle",
-    className: "jsx-".concat(fileMenuStyles.__hash) + " " + "menu-toggle"
+    className: `jsx-${fileMenuStyles.__hash}` + " " + "menu-toggle"
   }, i18n.t('File'))), /*#__PURE__*/React.createElement(OpenFileDialog, {
     open: currentDialog === 'open',
     type: fileType,

package/build/es/components/FileMenu/FileMenu.styles.js

@@ -1,3 +1,3 @@
 import { colors } from '@dhis2/ui';
-export const fileMenuStyles = [".menu-toggle.jsx-632952601{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:15px;font-weight:400;text-transform:none;padding:6px 8px;color:".concat(colors.grey900, ";min-width:64px;box-sizing:border-box;line-height:1.75;background:none;border:none;-webkit-transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;cursor:pointer;}"), ".menu-toggle.jsx-632952601:hover.jsx-632952601:enabled{background-color:".concat(colors.grey300, ";opacity:0.8;}"), ".menu-toggle.jsx-632952601:disabled{color:".concat(colors.grey400, ";}"), ".menu-toggle.jsx-632952601:focus{outline:none;}"];
+export const fileMenuStyles = [`.menu-toggle.jsx-632952601{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:15px;font-weight:400;text-transform:none;padding:6px 8px;color:${colors.grey900};min-width:64px;box-sizing:border-box;line-height:1.75;background:none;border:none;-webkit-transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;cursor:pointer;}`, `.menu-toggle.jsx-632952601:hover.jsx-632952601:enabled{background-color:${colors.grey300};opacity:0.8;}`, `.menu-toggle.jsx-632952601:disabled{color:${colors.grey400};}`, ".menu-toggle.jsx-632952601:focus{outline:none;}"];
 fileMenuStyles.__hash = "632952601";

package/build/es/components/FileMenu/GetLinkDialog.js

@@ -13,7 +13,7 @@ export const GetLinkDialog = ({
     baseUrl
   } = useConfig(); // TODO simply use href from the visualization object?
 
-  const appUrl = new URL("".concat(baseUrl, "/").concat(appPathFor(type, id)), "".concat(window.location.origin).concat(window.location.pathname));
+  const appUrl = new URL(`${baseUrl}/${appPathFor(type, id)}`, `${window.location.origin}${window.location.pathname}`);
   return /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose
   }, /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement("p", null, i18n.t('Open in this app')), /*#__PURE__*/React.createElement("a", {

package/build/es/components/FileMenu/__tests__/DeleteDialog.spec.js

@@ -27,7 +27,7 @@ describe('The FileMenu - DeleteDialog component', () => {
     expect(getDeleteDialogComponent(props).find(Modal)).toHaveLength(1);
   });
   it('renders a ModalTitle containing the type prop', () => {
-    expect(getDeleteDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual("Delete ".concat(props.type));
+    expect(getDeleteDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Delete ${props.type}`);
   });
   it('calls the onClose callback when the Cancel button is clicked', () => {
     getDeleteDialogComponent(props).find(Button).first().simulate('click');

package/build/es/components/FileMenu/__tests__/RenameDialog.spec.js

@@ -29,7 +29,7 @@ describe('The FileMenu - RenameDialog component', () => {
     expect(getRenameDialogComponent(props).find(Modal)).toHaveLength(1);
   });
   it('renders a ModalTitle containing the type prop', () => {
-    expect(getRenameDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual("Rename ".concat(props.type));
+    expect(getRenameDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Rename ${props.type}`);
   });
   it('renders a InputField for name', () => {
     expect(getRenameDialogComponent(props).findWhere(n => n.prop('label') === 'Name')).toHaveLength(1);

package/build/es/components/FileMenu/__tests__/SaveAsDialog.spec.js

@@ -32,7 +32,7 @@ describe('The FileMenu - SaveAsDialog component', () => {
     expect(getSaveAsDialogComponent(props).find(Modal)).toHaveLength(1);
   });
   it('renders a ModalTitle containing the type prop', () => {
-    expect(getSaveAsDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual("Save ".concat(props.type, " as"));
+    expect(getSaveAsDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Save ${props.type} as`);
   });
   it('renders a InputField for name with prefilled value from the object prop', () => {
     const nameInputField = getSaveAsDialogComponent(props).findWhere(n => n.prop('label') === 'Name');

package/build/es/components/FileMenu/utils.js

@@ -4,16 +4,16 @@ export const endpointFromFileType = fileType => {
     case 'visualization':
     case 'map':
     default:
-      return "".concat(fileType, "s");
+      return `${fileType}s`;
   }
 };
 export const appPathFor = (fileType, id) => {
   switch (fileType) {
     case 'visualization':
-      return "dhis-web-data-visualizer/#/".concat(id);
+      return `dhis-web-data-visualizer/#/${id}`;
 
     case 'map':
-      return "dhis-web-maps/index.html?id=".concat(id);
+      return `dhis-web-maps/index.html?id=${id}`;
 
     default:
       return;

package/build/es/components/Filter/Filter.js

@@ -12,7 +12,7 @@ const Filter = ({
   type,
   dataTest
 }) => /*#__PURE__*/React.createElement("div", {
-  className: "jsx-".concat(styles.__hash) + " " + "container"
+  className: `jsx-${styles.__hash}` + " " + "container"
 }, /*#__PURE__*/React.createElement(InputField, {
   placeholder: placeholder,
   onChange: ref => ref.value.length ? onChange(ref.value) : onClear(),

package/build/es/components/Filter/styles/Filter.style.js

@@ -1,4 +1,4 @@
 import { spacers } from '@dhis2/ui';
-const _defaultExport = [".container.jsx-2445670963{margin-bottom:".concat(spacers.dp16, ";}")];
+const _defaultExport = [`.container.jsx-2445670963{margin-bottom:${spacers.dp16};}`];
 _defaultExport.__hash = "2445670963";
 export default _defaultExport;

package/build/es/components/LegendKey/LegendKey.js

@@ -9,26 +9,26 @@ const LegendKey = ({
 }) => {
   return legendSets.length ? /*#__PURE__*/React.createElement("div", {
     "data-test": 'legend-key-container',
-    className: "jsx-".concat(styles.__hash) + " " + "container"
+    className: `jsx-${styles.__hash}` + " " + "container"
   }, legendSets.map((legendSet, index) => /*#__PURE__*/React.createElement("div", {
     key: legendSet.id,
-    "data-test": "legend-key-item-".concat(legendSet.id),
-    className: "jsx-".concat(styles.__hash) + " " + (cx('legendSet', {
+    "data-test": `legend-key-item-${legendSet.id}`,
+    className: `jsx-${styles.__hash}` + " " + (cx('legendSet', {
       divider: index > 0
     }) || "")
   }, legendSets.length > 1 && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "legendSetName"
+    className: `jsx-${styles.__hash}` + " " + "legendSetName"
   }, legendSet.name), legendSet.legends.sort((a, b) => a.startValue - b.startValue).map(legend => /*#__PURE__*/React.createElement("div", {
     key: legend.startValue,
     style: {
-      borderLeft: "6px ".concat(legend.color, " solid")
+      borderLeft: `6px ${legend.color} solid`
     },
-    className: "jsx-".concat(styles.__hash) + " " + "legend"
+    className: `jsx-${styles.__hash}` + " " + "legend"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash)
+    className: `jsx-${styles.__hash}`
   }, legend.name), /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "values"
-  }, "".concat(legend.startValue, "-<").concat(legend.endValue)))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    className: `jsx-${styles.__hash}` + " " + "values"
+  }, `${legend.startValue}-<${legend.endValue}`))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles)) : null;
 };

package/build/es/components/LegendKey/styles/LegendKey.style.js

@@ -1,4 +1,4 @@
 import { spacers, colors } from '@dhis2/ui';
-const _defaultExport = [".container.jsx-3203773516{width:180px;background:".concat(colors.white, ";padding:").concat(spacers.dp8, ";border:1px solid ").concat(colors.grey400, ";}"), ".legendSet.jsx-3203773516{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:".concat(spacers.dp4, ";}"), ".legendSetName.jsx-3203773516{display:inline-block;font-size:13px;color:".concat(colors.grey700, ";margin-bottom:2px;}"), ".legend.jsx-3203773516{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:".concat(spacers.dp4, " 0 ").concat(spacers.dp4, " 6px;white-space:break-spaces;text-align:left;font-size:13px;}"), ".values.jsx-3203773516{color:".concat(colors.grey600, ";font-size:12px;padding-top:2px;}"), ".divider.jsx-3203773516{border-top:1px solid ".concat(colors.grey400, ";padding-top:").concat(spacers.dp8, ";margin-top:").concat(spacers.dp8, ";}")];
+const _defaultExport = [`.container.jsx-3203773516{width:180px;background:${colors.white};padding:${spacers.dp8};border:1px solid ${colors.grey400};}`, `.legendSet.jsx-3203773516{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:${spacers.dp4};}`, `.legendSetName.jsx-3203773516{display:inline-block;font-size:13px;color:${colors.grey700};margin-bottom:2px;}`, `.legend.jsx-3203773516{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:${spacers.dp4} 0 ${spacers.dp4} 6px;white-space:break-spaces;text-align:left;font-size:13px;}`, `.values.jsx-3203773516{color:${colors.grey600};font-size:12px;padding-top:2px;}`, `.divider.jsx-3203773516{border-top:1px solid ${colors.grey400};padding-top:${spacers.dp8};margin-top:${spacers.dp8};}`];
 _defaultExport.__hash = "3203773516";
 export default _defaultExport;

package/build/es/components/OpenFileDialog/CustomSelectOption.js

@@ -14,12 +14,12 @@ export const CustomSelectOption = ({
   onClick: e => onClick({}, e),
   "data-value": value,
   "data-label": label,
-  className: "jsx-".concat(styles.__hash) + " " + (cx({
+  className: `jsx-${styles.__hash}` + " " + (cx({
     active,
     disabled
   }) || "")
 }, icon, /*#__PURE__*/React.createElement("span", {
-  className: "jsx-".concat(styles.__hash) + " " + "label"
+  className: `jsx-${styles.__hash}` + " " + "label"
 }, label), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: styles.__hash
 }, styles));

package/build/es/components/OpenFileDialog/OpenFileDialog.js

@@ -24,14 +24,14 @@ const getQuery = type => ({
     }) => {
       const queryParams = {
         filter: filters,
-        fields: "id,type,displayName,title,displayDescription,created,lastUpdated,user,access,href",
+        fields: `id,type,displayName,title,displayDescription,created,lastUpdated,user,access,href`,
         paging: true,
         pageSize: 8,
         page
       };
 
       if (sortDirection !== 'default') {
-        queryParams.order = "".concat(sortField, ":").concat(sortDirection);
+        queryParams.order = `${sortField}:${sortDirection}`;
       }
 
       return queryParams;
@@ -70,11 +70,11 @@ export const OpenFileDialog = ({
 
     switch (filters.createdBy) {
       case CREATED_BY_ALL_BUT_CURRENT_USER:
-        queryFilters.push("user.id:!eq:".concat(currentUser.id));
+        queryFilters.push(`user.id:!eq:${currentUser.id}`);
         break;
 
       case CREATED_BY_CURRENT_USER:
-        queryFilters.push("user.id:eq:".concat(currentUser.id));
+        queryFilters.push(`user.id:eq:${currentUser.id}`);
         break;
 
       case CREATED_BY_ALL:
@@ -91,12 +91,12 @@ export const OpenFileDialog = ({
         break;
 
       default:
-        queryFilters.push("type:eq:".concat(filters.visType));
+        queryFilters.push(`type:eq:${filters.visType}`);
         break;
     }
 
     if (filters.searchTerm) {
-      queryFilters.push("name:ilike:".concat(filters.searchTerm));
+      queryFilters.push(`name:ilike:${filters.searchTerm}`);
     } // for ER 2.38 only show line list ER types
 
 
@@ -174,11 +174,11 @@ export const OpenFileDialog = ({
   }, /*#__PURE__*/React.createElement(ModalTitle, null, getTranslatedString(type, 'modalTitle')), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Box, {
     minHeight: "496px"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "search-and-filter-bar"
+    className: `jsx-${styles.__hash}` + " " + "search-and-filter-bar"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "search-field-container"
+    className: `jsx-${styles.__hash}` + " " + "search-field-container"
   }, /*#__PURE__*/React.createElement(NameFilter, {
-    dataTest: "".concat(cypressSelector, "-name-filter"),
+    dataTest: `${cypressSelector}-name-filter`,
     value: nameFilterValue,
     onChange: value => {
       setNameFilterValue(value);
@@ -188,14 +188,14 @@ export const OpenFileDialog = ({
       }), 200));
     }
   })), type === AO_TYPE_VISUALIZATION && /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "type-field-container"
+    className: `jsx-${styles.__hash}` + " " + "type-field-container"
   }, /*#__PURE__*/React.createElement(VisTypeFilter, {
     selected: filters.visType,
     onChange: value => setFilters({ ...filters,
       visType: value
     })
   })), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "created-by-field-container"
+    className: `jsx-${styles.__hash}` + " " + "created-by-field-container"
   }, /*#__PURE__*/React.createElement(CreatedByFilter, {
     selected: filters.createdBy,
     onChange: value => setFilters({ ...filters,
@@ -233,25 +233,25 @@ export const OpenFileDialog = ({
   }, /*#__PURE__*/React.createElement(Box, {
     height: "384px"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-cell"
+    className: `jsx-${styles.__hash}` + " " + "info-cell"
   }, /*#__PURE__*/React.createElement(CircularLoader, {
     small: true
   }), /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-text"
+    className: `jsx-${styles.__hash}` + " " + "info-text"
   }, getTranslatedString(type, 'loadingText')))))), !loading && !(data !== null && data !== void 0 && data.files[AOTypeMap[type].apiEndpoint].length) > 0 && /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
     large: true
   }, /*#__PURE__*/React.createElement(Box, {
     minHeight: "384px"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-cell"
+    className: `jsx-${styles.__hash}` + " " + "info-cell"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-container"
+    className: `jsx-${styles.__hash}` + " " + "info-container"
   }, !isEqual(filters, defaultFilters) ? /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-text"
+    className: `jsx-${styles.__hash}` + " " + "info-text"
   }, getTranslatedString(type, 'noFilteredDataText')) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-text"
+    className: `jsx-${styles.__hash}` + " " + "info-text"
   }, getTranslatedString(type, 'noDataText')), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-button"
+    className: `jsx-${styles.__hash}` + " " + "info-button"
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: () => {
       onNew();
@@ -264,7 +264,7 @@ export const OpenFileDialog = ({
   }))), (data === null || data === void 0 ? void 0 : data.files[AOTypeMap[type].apiEndpoint].length) > 0 && /*#__PURE__*/React.createElement(DataTableToolbar, {
     position: "bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + "pagination-controls"
+    className: `jsx-${styles.__hash}` + " " + "pagination-controls"
   }, /*#__PURE__*/React.createElement(PaginationControls, {
     page: page,
     pager: data.files.pager,

package/build/es/components/OpenFileDialog/OpenFileDialog.styles.js

@@ -1,3 +1,3 @@
 import { colors, spacers } from '@dhis2/ui';
-export const styles = [".data-table-body.jsx-2890213967{min-height:465px;}", ".pagination-controls.jsx-2890213967{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".search-and-filter-bar.jsx-2890213967{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:".concat(spacers.dp8, ";}"), ".search-field-container.jsx-2890213967{min-width:220px;}", ".type-field-container.jsx-2890213967,.created-by-field-container.jsx-2890213967{min-width:180px;}", ".info-cell.jsx-2890213967{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:".concat(spacers.dp32, " 0;}"), ".info-container.jsx-2890213967{max-width:400px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".info-text.jsx-2890213967{text-align:center;font-size:14px;line-height:19px;color:".concat(colors.grey700, ";}"), ".info-button.jsx-2890213967{margin-top:".concat(spacers.dp12, ";}")];
+export const styles = [".data-table-body.jsx-2890213967{min-height:465px;}", ".pagination-controls.jsx-2890213967{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.search-and-filter-bar.jsx-2890213967{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:${spacers.dp8};}`, ".search-field-container.jsx-2890213967{min-width:220px;}", ".type-field-container.jsx-2890213967,.created-by-field-container.jsx-2890213967{min-width:180px;}", `.info-cell.jsx-2890213967{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:${spacers.dp32} 0;}`, ".info-container.jsx-2890213967{max-width:400px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", `.info-text.jsx-2890213967{text-align:center;font-size:14px;line-height:19px;color:${colors.grey700};}`, `.info-button.jsx-2890213967{margin-top:${spacers.dp12};}`];
 styles.__hash = "2890213967";

package/build/es/components/OpenFileDialog/styles/CustomSelectOption.style.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui';
-const _defaultExport = ["div.jsx-1267200705{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(colors.grey900, ";padding:").concat(spacers.dp8, " ").concat(spacers.dp12, ";}"), "div.jsx-1267200705:hover{background-color:".concat(colors.grey200, ";}"), "div.jsx-1267200705:active,div.active.jsx-1267200705{background-color:".concat(colors.teal700, ";color:").concat(colors.white, ";cursor:auto;}"), "div.disabled.jsx-1267200705{color:".concat(colors.grey500, ";cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.disabled.jsx-1267200705:hover{background-color:initial;}", "span.label.jsx-1267200705{margin-left:".concat(spacers.dp8, ";}")];
+const _defaultExport = [`div.jsx-1267200705{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding:${spacers.dp8} ${spacers.dp12};}`, `div.jsx-1267200705:hover{background-color:${colors.grey200};}`, `div.jsx-1267200705:active,div.active.jsx-1267200705{background-color:${colors.teal700};color:${colors.white};cursor:auto;}`, `div.disabled.jsx-1267200705{color:${colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "div.disabled.jsx-1267200705:hover{background-color:initial;}", `span.label.jsx-1267200705{margin-left:${spacers.dp8};}`];
 _defaultExport.__hash = "1267200705";
 export default _defaultExport;

package/build/es/components/Options/styles/VisualizationOptions.style.js

@@ -12,19 +12,19 @@ export const modalContent = {
 export const tabBar = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3103009923"
-  }, ["div.jsx-3103009923{padding-right:".concat(spacers.dp24, ";}")]),
+  }, [`div.jsx-3103009923{padding-right:${spacers.dp24};}`]),
   className: "jsx-3103009923"
 };
 export const tabContent = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2208787536"
-  }, ["div.jsx-2208787536{overflow:auto;padding-right:".concat(spacers.dp24, ";}")]),
+  }, [`div.jsx-2208787536{overflow:auto;padding-right:${spacers.dp24};}`]),
   className: "jsx-2208787536"
 };
 export const tabSection = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1427514941"
-  }, ["div.jsx-1427514941{padding:".concat(spacers.dp16, " 0;}"), "div.jsx-1427514941:not(:last-child){border-bottom:1px solid ".concat(colors.grey300, ";margin-bottom:").concat(spacers.dp8, ";}")]),
+  }, [`div.jsx-1427514941{padding:${spacers.dp16} 0;}`, `div.jsx-1427514941:not(:last-child){border-bottom:1px solid ${colors.grey300};margin-bottom:${spacers.dp8};}`]),
   className: "jsx-1427514941"
 };
 export const tabSectionContent = {
@@ -36,37 +36,37 @@ export const tabSectionContent = {
 export const tabSectionTitle = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3115295887"
-  }, ["span.jsx-3115295887{display:inline-block;padding-bottom:".concat(spacers.dp12, ";font-size:15px;color:").concat(colors.grey900, ";font-weight:500;-webkit-letter-spacing:0.2px;-moz-letter-spacing:0.2px;-ms-letter-spacing:0.2px;letter-spacing:0.2px;}")]),
+  }, [`span.jsx-3115295887{display:inline-block;padding-bottom:${spacers.dp12};font-size:15px;color:${colors.grey900};font-weight:500;-webkit-letter-spacing:0.2px;-moz-letter-spacing:0.2px;-ms-letter-spacing:0.2px;letter-spacing:0.2px;}`]),
   className: "jsx-3115295887"
 };
 export const tabSectionTitleMargin = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "642558349"
-  }, ["span.jsx-642558349{margin-top:".concat(spacers.dp8, ";}")]),
+  }, [`span.jsx-642558349{margin-top:${spacers.dp8};}`]),
   className: "jsx-642558349"
 };
 export const tabSectionOption = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1665807213"
-  }, ["div.jsx-1665807213:not(:last-child):not(.inline){padding-bottom:".concat(spacers.dp16, ";}")]),
+  }, [`div.jsx-1665807213:not(:last-child):not(.inline){padding-bottom:${spacers.dp16};}`]),
   className: "jsx-1665807213"
 };
 export const tabSectionOptionItem = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2983019948"
-  }, ["div.jsx-2983019948:not(:last-child){padding-bottom:".concat(spacers.dp8, ";}")]),
+  }, [`div.jsx-2983019948:not(:last-child){padding-bottom:${spacers.dp8};}`]),
   className: "jsx-2983019948"
 };
 export const tabSectionOptionText = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3330936769"
-  }, ["p.jsx-3330936769{margin:0;padding-bottom:".concat(spacers.dp8, ";font-size:14px;line-height:19px;color:").concat(colors.grey700, ";}")]),
+  }, [`p.jsx-3330936769{margin:0;padding-bottom:${spacers.dp8};font-size:14px;line-height:19px;color:${colors.grey700};}`]),
   className: "jsx-3330936769"
 };
 export const tabSectionOptionToggleable = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "684239008"
-  }, ["div.jsx-684239008{margin:".concat(spacers.dp4, " 0 0 23px;}")]),
+  }, [`div.jsx-684239008{margin:${spacers.dp4} 0 0 23px;}`]),
   className: "jsx-684239008"
 };
 export const tabSectionToggleableSubsection = {
@@ -84,6 +84,6 @@ export const tabSectionOptionComplexInline = {
 export const tabSectionOptionIcon = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "112181591"
-  }, ["span.jsx-112181591{vertical-align:top;margin-right:".concat(spacers.dp4, ";color:").concat(colors.grey600, ";}")]),
+  }, [`span.jsx-112181591{vertical-align:top;margin-right:${spacers.dp4};color:${colors.grey600};}`]),
   className: "jsx-112181591"
 };