@commercetools-frontend-extensions/export-resources-modal 5.3.0 → 5.4.0

package/dist/{fr-FR-96dce16c.esm.js → fr-FR-4f366109.esm.js}

@@ -49,7 +49,7 @@ var frFR = {
 	},
 	"ExportResourcesModal.columns": {
 		developer_comment: "Label for column separator select",
-		string: "Columns:"
+		string: "Columns"
 	},
 	"ExportResourcesModal.confirmSelection": {
 		developer_comment: "Label for \"Confirm selection\" button",
@@ -63,10 +63,6 @@ var frFR = {
 		developer_comment: "CSV upload failed title",
 		string: "Échec de l'importation du fichier CSV"
 	},
-	"ExportResourcesModal.decimal": {
-		developer_comment: "Label for decimal separator select",
-		string: "Decimals:"
-	},
 	"ExportResourcesModal.decimalSeparatorComma": {
 		developer_comment: "Label for comma decimal separator option",
 		string: "comma (,)"
@@ -75,6 +71,10 @@ var frFR = {
 		developer_comment: "Label for point decimal separator option",
 		string: "point (.)"
 	},
+	"ExportResourcesModal.decimals": {
+		developer_comment: "Label for decimal separator select",
+		string: "Decimals"
+	},
 	"ExportResourcesModal.defineFieldsToIncludeInExport": {
 		developer_comment: "A message to define the fields to include in export",
 		string: "Définissez les champs à inclure dans votre exportation à l'aide du fichier CSV ci-dessous. Le fichier doit contenir des en-têtes de colonne dans le format prédéfini indiqué dans <templateLink>notre modèle</templateLink>. Un fichier CSV précédemment exporté peut également être utilisé."
@@ -103,6 +103,14 @@ var frFR = {
 		developer_comment: "Label for error type column",
 		string: "Type d'erreur"
 	},
+	"ExportResourcesModal.excelOptimized": {
+		developer_comment: "Label for Excel-optimized CSV export checkbox",
+		string: "CSV file optimized for Excel"
+	},
+	"ExportResourcesModal.excelOptimizedDescription": {
+		developer_comment: "Description for Excel-optimized CSV export checkbox",
+		string: "Checking this option will prevent Excel from interpreting the data of the file."
+	},
 	"ExportResourcesModal.exportBasedOnMyViewsMessage": {
 		developer_comment: "Select Export setttings based on my views",
 		string: "Sélectionnez les paramètres d'exportation sur la base de :"
@@ -375,6 +383,10 @@ var frFR = {
 		developer_comment: "Label for query predicate option",
 		string: "Prédicat de requête"
 	},
+	"ExportResourcesModal.readMoreOnDocumentation": {
+		developer_comment: "Read more on documentation",
+		string: "Read more on the {documentationLink}"
+	},
 	"ExportResourcesModal.saveAs": {
 		developer_comment: "Label for \"Save as:\"",
 		string: "Save as:"

package/dist/{fr-FR-0eab30ec.cjs.prod.js → fr-FR-5fbee168.cjs.prod.js}

@@ -51,7 +51,7 @@ var frFR = {
 	},
 	"ExportResourcesModal.columns": {
 		developer_comment: "Label for column separator select",
-		string: "Columns:"
+		string: "Columns"
 	},
 	"ExportResourcesModal.confirmSelection": {
 		developer_comment: "Label for \"Confirm selection\" button",
@@ -65,10 +65,6 @@ var frFR = {
 		developer_comment: "CSV upload failed title",
 		string: "Échec de l'importation du fichier CSV"
 	},
-	"ExportResourcesModal.decimal": {
-		developer_comment: "Label for decimal separator select",
-		string: "Decimals:"
-	},
 	"ExportResourcesModal.decimalSeparatorComma": {
 		developer_comment: "Label for comma decimal separator option",
 		string: "comma (,)"
@@ -77,6 +73,10 @@ var frFR = {
 		developer_comment: "Label for point decimal separator option",
 		string: "point (.)"
 	},
+	"ExportResourcesModal.decimals": {
+		developer_comment: "Label for decimal separator select",
+		string: "Decimals"
+	},
 	"ExportResourcesModal.defineFieldsToIncludeInExport": {
 		developer_comment: "A message to define the fields to include in export",
 		string: "Définissez les champs à inclure dans votre exportation à l'aide du fichier CSV ci-dessous. Le fichier doit contenir des en-têtes de colonne dans le format prédéfini indiqué dans <templateLink>notre modèle</templateLink>. Un fichier CSV précédemment exporté peut également être utilisé."
@@ -105,6 +105,14 @@ var frFR = {
 		developer_comment: "Label for error type column",
 		string: "Type d'erreur"
 	},
+	"ExportResourcesModal.excelOptimized": {
+		developer_comment: "Label for Excel-optimized CSV export checkbox",
+		string: "CSV file optimized for Excel"
+	},
+	"ExportResourcesModal.excelOptimizedDescription": {
+		developer_comment: "Description for Excel-optimized CSV export checkbox",
+		string: "Checking this option will prevent Excel from interpreting the data of the file."
+	},
 	"ExportResourcesModal.exportBasedOnMyViewsMessage": {
 		developer_comment: "Select Export setttings based on my views",
 		string: "Sélectionnez les paramètres d'exportation sur la base de :"
@@ -377,6 +385,10 @@ var frFR = {
 		developer_comment: "Label for query predicate option",
 		string: "Prédicat de requête"
 	},
+	"ExportResourcesModal.readMoreOnDocumentation": {
+		developer_comment: "Read more on documentation",
+		string: "Read more on the {documentationLink}"
+	},
 	"ExportResourcesModal.saveAs": {
 		developer_comment: "Label for \"Save as:\"",
 		string: "Save as:"

package/dist/{fr-FR-62affef0.cjs.dev.js → fr-FR-685637af.cjs.dev.js}

@@ -51,7 +51,7 @@ var frFR = {
 	},
 	"ExportResourcesModal.columns": {
 		developer_comment: "Label for column separator select",
-		string: "Columns:"
+		string: "Columns"
 	},
 	"ExportResourcesModal.confirmSelection": {
 		developer_comment: "Label for \"Confirm selection\" button",
@@ -65,10 +65,6 @@ var frFR = {
 		developer_comment: "CSV upload failed title",
 		string: "Échec de l'importation du fichier CSV"
 	},
-	"ExportResourcesModal.decimal": {
-		developer_comment: "Label for decimal separator select",
-		string: "Decimals:"
-	},
 	"ExportResourcesModal.decimalSeparatorComma": {
 		developer_comment: "Label for comma decimal separator option",
 		string: "comma (,)"
@@ -77,6 +73,10 @@ var frFR = {
 		developer_comment: "Label for point decimal separator option",
 		string: "point (.)"
 	},
+	"ExportResourcesModal.decimals": {
+		developer_comment: "Label for decimal separator select",
+		string: "Decimals"
+	},
 	"ExportResourcesModal.defineFieldsToIncludeInExport": {
 		developer_comment: "A message to define the fields to include in export",
 		string: "Définissez les champs à inclure dans votre exportation à l'aide du fichier CSV ci-dessous. Le fichier doit contenir des en-têtes de colonne dans le format prédéfini indiqué dans <templateLink>notre modèle</templateLink>. Un fichier CSV précédemment exporté peut également être utilisé."
@@ -105,6 +105,14 @@ var frFR = {
 		developer_comment: "Label for error type column",
 		string: "Type d'erreur"
 	},
+	"ExportResourcesModal.excelOptimized": {
+		developer_comment: "Label for Excel-optimized CSV export checkbox",
+		string: "CSV file optimized for Excel"
+	},
+	"ExportResourcesModal.excelOptimizedDescription": {
+		developer_comment: "Description for Excel-optimized CSV export checkbox",
+		string: "Checking this option will prevent Excel from interpreting the data of the file."
+	},
 	"ExportResourcesModal.exportBasedOnMyViewsMessage": {
 		developer_comment: "Select Export setttings based on my views",
 		string: "Sélectionnez les paramètres d'exportation sur la base de :"
@@ -377,6 +385,10 @@ var frFR = {
 		developer_comment: "Label for query predicate option",
 		string: "Prédicat de requête"
 	},
+	"ExportResourcesModal.readMoreOnDocumentation": {
+		developer_comment: "Read more on documentation",
+		string: "Read more on the {documentationLink}"
+	},
 	"ExportResourcesModal.saveAs": {
 		developer_comment: "Label for \"Save as:\"",
 		string: "Save as:"

package/dist/{index-2ed12fce.cjs.dev.js → index-1a9a449c.cjs.dev.js}

@@ -656,12 +656,12 @@ var messages = reactIntl.defineMessages({
   columns: {
     id: 'ExportResourcesModal.columns',
     description: 'Label for column separator select',
-    defaultMessage: 'Columns:'
+    defaultMessage: 'Columns'
   },
-  decimal: {
-    id: 'ExportResourcesModal.decimal',
+  decimals: {
+    id: 'ExportResourcesModal.decimals',
     description: 'Label for decimal separator select',
-    defaultMessage: 'Decimals:'
+    defaultMessage: 'Decimals'
   },
   columnSeparatorComma: {
     id: 'ExportResourcesModal.columnSeparatorComma',
@@ -697,6 +697,21 @@ var messages = reactIntl.defineMessages({
     id: 'ExportResourcesModal.csvSettings',
     description: 'Label for CSV settings section',
     defaultMessage: 'CSV settings:'
+  },
+  excelOptimized: {
+    id: 'ExportResourcesModal.excelOptimized',
+    description: 'Label for Excel-optimized CSV export checkbox',
+    defaultMessage: 'CSV file optimized for Excel'
+  },
+  excelOptimizedDescription: {
+    id: 'ExportResourcesModal.excelOptimizedDescription',
+    description: 'Description for Excel-optimized CSV export checkbox',
+    defaultMessage: 'Checking this option will prevent Excel from interpreting the data of the file.'
+  },
+  readMoreOnDocumentation: {
+    id: 'ExportResourcesModal.readMoreOnDocumentation',
+    description: 'Read more on documentation',
+    defaultMessage: 'Read more on the {documentationLink}'
   }
 });
 
@@ -805,6 +820,7 @@ const OUTPUT_FORMAT_OPTIONS = [{
 const EXPORT_DATA_DOCUMENTATION_LINK = 'https://docs.commercetools.com/merchant-center/export-data';
 const CSV_TEMPLATES_LINK = 'https://docs.commercetools.com/merchant-center/import-data#download-a-template';
 const CSV_STRUCTURE_DOCUMENTATION_LINK = 'https://docs.commercetools.com/merchant-center/export-data#structure-of-exported-csv-files';
+const EXPORT_EXCEL_DOCUMENTATION_LINK = 'https://docs.commercetools.com/merchant-center/export-data#optimize-csv-file-for-microsoft-excel';
 
 const resourceTypeMessages = {
   [EXPORTABLE_RESOURCES.CATEGORY]: {
@@ -1577,6 +1593,7 @@ const useInitialValues = props => {
       groups: updateFieldGroupWithAdditionalFieldExtensions(groups),
       queryPredicate: '',
       fillRows: false,
+      excelCompatible: false,
       outputFormat: props.outputFormat,
       columnSeparator: DELIMITERS$1.COMMA,
       decimalSeparator: DELIMITERS$1.POINT,
@@ -1663,6 +1680,7 @@ const useStartExportOperation = props => {
         fileFormat: values.outputFormat,
         locales,
         fillRows: isCsv && values.fillRows,
+        excelCompatible: isCsv && values.excelCompatible,
         separator: isCsv ? {
           columns: values.columnSeparator,
           decimal: values.decimalSeparator
@@ -1898,6 +1916,7 @@ const useValidateExportOperation = () => {
 function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ExportPreferenceSection = () => {
+  const intl = reactIntl.useIntl();
   const _useExportResourcesMo = useExportResourcesModalContext(),
     formik = _useExportResourcesMo.formik;
   const columnSeparatorOptions = _mapInstanceProperty__default["default"](COLUMN_DELIMITER_OPTIONS).call(COLUMN_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
@@ -1907,7 +1926,7 @@ const ExportPreferenceSection = () => {
     label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, option.label))
   }));
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "m",
+    scale: "xl",
     children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
       scale: "s",
       children: [jsxRuntime.jsxs("div", {
@@ -1918,60 +1937,80 @@ const ExportPreferenceSection = () => {
         })]
       }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
         scale: "s",
-        children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-          scale: "xs",
-          alignItems: "center",
-          children: [jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: messages.columns
-          }), jsxRuntime.jsx(uiKit.SelectInput, {
-            horizontalConstraint: 4,
-            isSearchable: false,
-            options: columnSeparatorOptions,
-            value: _valuesInstanceProperty__default["default"](formik).columnSeparator,
-            onChange: e => {
-              formik.setFieldValue('columnSeparator', e.target.value);
-            },
-            menuPortalTarget: document.body,
-            menuPortalZIndex: Z_INDEX_DROPDOWN
-          })]
-        }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-          scale: "s",
-          alignItems: "center",
-          children: [jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: messages.decimal
-          }), jsxRuntime.jsx(uiKit.SelectInput, {
-            isSearchable: false,
-            options: decimalSeparatorOptions,
-            value: _valuesInstanceProperty__default["default"](formik).decimalSeparator,
-            onChange: e => {
-              formik.setFieldValue('decimalSeparator', e.target.value);
-            },
-            menuPortalTarget: document.body,
-            horizontalConstraint: 4,
-            menuPortalZIndex: Z_INDEX_DROPDOWN
-          })]
+        children: [jsxRuntime.jsx(uiKit.SelectField, {
+          title: intl.formatMessage(messages.columns),
+          isSearchable: false,
+          options: columnSeparatorOptions,
+          value: _valuesInstanceProperty__default["default"](formik).columnSeparator,
+          onChange: e => {
+            formik.setFieldValue('columnSeparator', e.target.value);
+          },
+          menuPortalTarget: document.body,
+          menuPortalZIndex: Z_INDEX_DROPDOWN
+        }), jsxRuntime.jsx(uiKit.SelectField, {
+          title: intl.formatMessage(messages.decimals),
+          isSearchable: false,
+          options: decimalSeparatorOptions,
+          value: _valuesInstanceProperty__default["default"](formik).decimalSeparator,
+          onChange: e => {
+            formik.setFieldValue('decimalSeparator', e.target.value);
+          },
+          menuPortalTarget: document.body,
+          menuPortalZIndex: Z_INDEX_DROPDOWN
         })]
       })]
-    }), jsxRuntime.jsxs("div", {
-      children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
-        isChecked: _valuesInstanceProperty__default["default"](formik).fillRows,
-        onChange: e => {
-          formik.setFieldValue('fillRows', e.target.checked);
-        },
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.fillRows))
-      }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-        scale: "xl",
-        children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Caption, {
-          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
-            values: {
-              documentationLink: jsxRuntime.jsx(uiKit.Link, {
-                intlMessage: messages.documentation,
-                isExternal: true,
-                to: CSV_STRUCTURE_DOCUMENTATION_LINK
-              }, "documentation-link")
-            }
+    }), jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+      scale: "xl",
+      children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+        scale: "m",
+        children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
+          isChecked: _valuesInstanceProperty__default["default"](formik).excelCompatible,
+          onChange: e => {
+            formik.setFieldValue('excelCompatible', e.target.checked);
+          },
+          children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.excelOptimized))
+        }), _valuesInstanceProperty__default["default"](formik).excelCompatible && jsxRuntime.jsx(uiKit.ContentNotification, {
+          type: "info",
+          children: jsxRuntime.jsx(uiKit.Spacings.Inset, {
+            scale: "xs",
+            children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+              children: [jsxRuntime.jsx("div", {
+                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.excelOptimizedDescription))
+              }), jsxRuntime.jsx("div", {
+                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a(_objectSpread$a({}, messages.readMoreOnDocumentation), {}, {
+                  values: {
+                    documentationLink: jsxRuntime.jsx(uiKit.Link, {
+                      intlMessage: messages.documentation,
+                      isExternal: true,
+                      to: EXPORT_EXCEL_DOCUMENTATION_LINK
+                    }, "documentation-link")
+                  }
+                }))
+              })]
+            })
           })
         })]
+      }), jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
+          isChecked: _valuesInstanceProperty__default["default"](formik).fillRows,
+          onChange: e => {
+            formik.setFieldValue('fillRows', e.target.checked);
+          },
+          children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.fillRows))
+        }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+          scale: "xl",
+          children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Caption, {
+            intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
+              values: {
+                documentationLink: jsxRuntime.jsx(uiKit.Link, {
+                  intlMessage: messages.documentation,
+                  isExternal: true,
+                  to: CSV_STRUCTURE_DOCUMENTATION_LINK
+                }, "documentation-link")
+              }
+            })
+          })]
+        })]
       })]
     })]
   });
@@ -2085,59 +2124,53 @@ const ExportFileSettingsStep = () => {
     onClose: onClose,
     size: 16,
     children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
-      children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
-        scale: "xxxl",
-        children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
-          scale: "l",
-          children: jsxRuntime.jsxs(uiKit.Grid, {
-            gridRowGap: uiKit.designTokens.spacingM,
-            gridTemplateColumns: `calc(${uiKit.designTokens.constraint3} + ${uiKit.designTokens.spacingL}) auto`,
-            children: [jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(uiKit.Text.Body, {
-                intlMessage: messages.scope
-              })
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(ExportScopeSection, {})
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(uiKit.Text.Body, {
-                intlMessage: messages.saveAs
-              })
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-                scale: "s",
-                children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
-                  children: jsxRuntime.jsx(uiKit.TextField, {
-                    name: "fileName",
-                    onChange: formik.handleChange,
-                    onBlur: formik.handleBlur,
-                    value: _valuesInstanceProperty__default["default"](formik).fileName,
-                    title: intl.formatMessage(messages.fileName),
-                    touched: formik.touched.fileName,
-                    errors: mapFormikErrors(formik.errors.fileName),
-                    renderError: renderFileNameError
-                  })
-                }), jsxRuntime.jsx(uiKit.SelectField, {
-                  name: "outputFormat",
-                  onChange: handleOutputFormatChange,
-                  onBlur: formik.handleBlur,
-                  value: _valuesInstanceProperty__default["default"](formik).outputFormat,
-                  title: intl.formatMessage(messages.outputFormat),
-                  options: OUTPUT_FORMAT_OPTIONS,
-                  menuPortalTarget: document.body,
-                  menuPortalZIndex: Z_INDEX_DROPDOWN
-                })]
+      children: jsxRuntime.jsxs(uiKit.Grid, {
+        gridRowGap: uiKit.designTokens.spacingXl,
+        gridTemplateColumns: `calc(${uiKit.designTokens.constraint3} + ${uiKit.designTokens.spacingL}) auto`,
+        children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: messages.scope
+          })
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(ExportScopeSection, {})
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: messages.saveAs
+          })
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+            scale: "xl",
+            children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
+              children: jsxRuntime.jsx(uiKit.TextField, {
+                name: "fileName",
+                onChange: formik.handleChange,
+                onBlur: formik.handleBlur,
+                value: _valuesInstanceProperty__default["default"](formik).fileName,
+                title: intl.formatMessage(messages.fileName),
+                touched: formik.touched.fileName,
+                errors: mapFormikErrors(formik.errors.fileName),
+                renderError: renderFileNameError
               })
-            }), shouldShowPreferences && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [jsxRuntime.jsx(uiKit.Grid.Item, {
-                children: jsxRuntime.jsx(uiKit.Text.Body, {
-                  intlMessage: messages.csvSettings
-                })
-              }), jsxRuntime.jsx(uiKit.Grid.Item, {
-                children: jsxRuntime.jsx(ExportPreferenceSection, {})
-              })]
+            }), jsxRuntime.jsx(uiKit.SelectField, {
+              name: "outputFormat",
+              onChange: handleOutputFormatChange,
+              onBlur: formik.handleBlur,
+              value: _valuesInstanceProperty__default["default"](formik).outputFormat,
+              title: intl.formatMessage(messages.outputFormat),
+              options: OUTPUT_FORMAT_OPTIONS,
+              menuPortalTarget: document.body,
+              menuPortalZIndex: Z_INDEX_DROPDOWN
             })]
           })
-        })
+        }), shouldShowPreferences && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+            children: jsxRuntime.jsx(uiKit.Text.Body, {
+              intlMessage: messages.csvSettings
+            })
+          }), jsxRuntime.jsx(uiKit.Grid.Item, {
+            children: jsxRuntime.jsx(ExportPreferenceSection, {})
+          })]
+        })]
       })
     })
   });
@@ -3358,11 +3391,11 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css(process.env.NODE_ENV === "production" ? "" : ";label:getDefaultDropWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtYXJlYS13cmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QlkiLCJmaWxlIjoiZHJvcC1hcmVhLXdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBEcm9wem9uZVJvb3RQcm9wcyB9IGZyb20gJ3JlYWN0LWRyb3B6b25lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuaW1wb3J0IHsgdHlwZSBEcm9wQXJlYVN0YXRlIH0gZnJvbSAnLi4vLi4vLi4vQHR5cGVzJ1xuXG5pbnRlcmZhY2UgRHJvcFdyYXBwZXJQcm9wcyBleHRlbmRzIERyb3B6b25lUm9vdFByb3BzIHtcbiAgZHJvcEFyZWFTdGF0ZTogRHJvcEFyZWFTdGF0ZVxufVxuZXhwb3J0IGNvbnN0IERyb3BXcmFwcGVyID0gc3R5bGVkLmRpdjxEcm9wV3JhcHBlclByb3BzPmBcbiAgJHtzdHlsZXMuYmFzZX1cbiAgJHsocHJvcHMpID0+IHtcbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2RlZmF1bHQnKSB7XG4gICAgICByZXR1cm4gc3R5bGVzLnJlYWR5Rm9yRHJvcFxuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2FjdGl2ZS1kcmFnJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5hY3RpdmVEcmFnXG4gICAgfVxuICAgIGlmIChwcm9wcy5kcm9wQXJlYVN0YXRlID09PSAnZmlsZS1kcm9wcGVkJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5maWxlRHJvcHBlZFxuICAgIH1cbiAgICByZXR1cm4gZ2V0RGVmYXVsdERyb3BXcmFwcGVyU3R5bGVzKHByb3BzLmRyb3BBcmVhU3RhdGUpXG4gIH19XG5gXG5mdW5jdGlvbiBnZXREZWZhdWx0RHJvcFdyYXBwZXJTdHlsZXMoX2Ryb3BBcmVhU3RhdGU6IG5ldmVyKSB7XG4gIHJldHVybiBjc3NgYFxufVxuIl19 */");
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-e3f74c13.cjs.dev.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-b5dd0364.cjs.dev.js' /* webpackChunkName: "active-drag-drop-area" */); }));
 
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-b35ddf49.cjs.dev.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-ad58c949.cjs.dev.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-ff7e0b8e.cjs.dev.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-a436dc63.cjs.dev.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -3443,17 +3476,17 @@ const getChunkImport = locale => {
   const intlLocale = i18n.mapLocaleToIntlLocale(locale);
   switch (intlLocale) {
     case 'de':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-44143469.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-d8a18a42.cjs.dev.js'); });
     case 'es':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-e6dd1e27.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-9f21ee16.cjs.dev.js'); });
     case 'fr-FR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-62affef0.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-685637af.cjs.dev.js'); });
     case 'ja':
       return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-ja" */'./ja-9bd5f452.cjs.dev.js'); });
     case 'pt-BR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-13243e64.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-78ae5352.cjs.dev.js'); });
     default:
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-6928b534.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-826f3da3.cjs.dev.js'); });
   }
 };
 const loadMessages = async locale => {