@commercetools-frontend-extensions/export-resources-modal 1.5.3 → 3.0.0

package/dist/commercetools-frontend-extensions-export-resources-modal.cjs.prod.js

@@ -11,10 +11,9 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var React = require('react');
 var reactIntl = require('react-intl');
 var applicationComponents = require('@commercetools-frontend/application-components');
-var uiKit = require('@commercetools-frontend/ui-kit');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _flatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -26,23 +25,28 @@ var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
 var _wrapNativeSuper = require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _Object$assign = require('@babel/runtime-corejs3/core-js-stable/object/assign');
+var uiKit = require('@commercetools-frontend/ui-kit');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
 var omitEmpty = require('omit-empty-es');
 var _findIndexInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find-index');
 var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var designSystem = require('@commercetools-uikit/design-system');
-var PropTypes = require('prop-types');
-var react$1 = require('react');
-var react = require('@emotion/react');
-var _styled = require('@emotion/styled/base');
-var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
+require('@commercetools-uikit/design-system');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
-var formik = require('formik');
 var moment = require('moment');
-var actionsGlobal = require('@commercetools-frontend/actions-global');
 var sdk = require('@commercetools-frontend/sdk');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
 var constants = require('@commercetools-frontend/constants');
+var _styled = require('@emotion/styled/base');
+var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var PropTypes = require('prop-types');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var formik = require('formik');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -54,18 +58,23 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _flatInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatInstanceProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _Object$assign__default = /*#__PURE__*/_interopDefault(_Object$assign);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
 var omitEmpty__default = /*#__PURE__*/_interopDefault(omitEmpty);
 var _findIndexInstanceProperty__default = /*#__PURE__*/_interopDefault(_findIndexInstanceProperty);
 var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
 var moment__default = /*#__PURE__*/_interopDefault(moment);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
 const EXPORT_OPERATION_STATES = {
   PROCESSING: 'processing',
@@ -73,10 +82,10 @@ const EXPORT_OPERATION_STATES = {
   FAILED: 'failed'
 };
 
-const EXPORT_SELECTION_TYPES = {
-  ALL_RESOURCES: 'allResources',
-  ONLY_MATCHING: 'onlyMatching',
-  ONLY_SELECTED: 'onlySelected'
+const EXPORT_TYPES = {
+  ALL: 'all',
+  FILTERED: 'filtered',
+  SELECTED: 'selected'
 };
 
 const EXPORTABLE_RESOURCES = {
@@ -89,20 +98,31 @@ const OUTPUT_FORMATS = {
   JSON: 'json',
   CSV: 'csv'
 };
+const OUTPUT_FORMAT_OPTIONS = [{
+  value: OUTPUT_FORMATS.CSV,
+  label: 'CSV'
+}, {
+  value: OUTPUT_FORMATS.JSON,
+  label: 'JSON'
+}];
+
+const COLUMN_DEFINITIONS_URLS = {
+  category: 'https://docs-proxy-sarm-product-import-csv.commercetools.vercel.app/merchant-center/import-categories#supported-headers-and-values'
+};
 
 function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
-let UnexpectedSelectionTypeError = /*#__PURE__*/function (_Error) {
-  _inherits(UnexpectedSelectionTypeError, _Error);
-  var _super = _createSuper$3(UnexpectedSelectionTypeError);
-  function UnexpectedSelectionTypeError(exportSelectionType) {
+let UnexpectedExportTypeError = /*#__PURE__*/function (_Error) {
+  _inherits(UnexpectedExportTypeError, _Error);
+  var _super = _createSuper$3(UnexpectedExportTypeError);
+  function UnexpectedExportTypeError(exportType) {
     var _this;
-    _classCallCheck(this, UnexpectedSelectionTypeError);
-    _this = _super.call(this, "Unexpected column: ".concat(exportSelectionType));
-    _this.name = 'UnexpectedSelectionTypeError';
+    _classCallCheck(this, UnexpectedExportTypeError);
+    _this = _super.call(this, "Unexpected export type: ".concat(exportType));
+    _this.name = 'UnexpectedExportTypeError';
     return _this;
   }
-  return _createClass(UnexpectedSelectionTypeError);
+  return _createClass(UnexpectedExportTypeError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -113,7 +133,7 @@ let MissingExportResourceProviderError = /*#__PURE__*/function (_Error) {
   function MissingExportResourceProviderError() {
     var _this;
     _classCallCheck(this, MissingExportResourceProviderError);
-    _this = _super.call(this, 'useExportResourcesContext must be used within ExportResourcesContextProvider');
+    _this = _super.call(this, 'useExportResourcesContext must be used within ExportResourcesProvider');
     _this.name = 'MissingExportResourceProviderError';
     return _this;
   }
@@ -150,8 +170,9 @@ let UnexpectedResourceTypeError = /*#__PURE__*/function (_Error) {
   return _createClass(UnexpectedResourceTypeError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
-function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$9(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const _excluded$1 = ["name"];
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$5(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$5(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function resourceTypeToPlural(_ref) {
   let resourceType = _ref.resourceType,
     _ref$isUpperCase = _ref.isUpperCase,
@@ -179,6 +200,12 @@ function resourceTypeToOperationName(resourceType) {
       throw UnexpectedResourceTypeError(resourceType);
   }
 }
+function mapLocalesToOptions(locales) {
+  return _mapInstanceProperty__default["default"](locales).call(locales, locale => ({
+    value: locale,
+    label: locale
+  }));
+}
 function replaceSpecialCharsWithUnderscore(string) {
   return string.replace(/[^a-zA-Z0-9]/g, '_');
 }
@@ -197,8 +224,8 @@ function flattenNestedFields(fields) {
       var _context2;
       return _mapInstanceProperty__default["default"](_context2 = flattenNestedFields(field.fields)).call(_context2, nestedField => {
         var _context3;
-        return _objectSpread$9(_objectSpread$9({}, nestedField), {}, {
-          key: _concatInstanceProperty__default["default"](_context3 = "".concat(field.key, ".")).call(_context3, nestedField.key)
+        return _objectSpread$5(_objectSpread$5({}, nestedField), {}, {
+          name: _concatInstanceProperty__default["default"](_context3 = "".concat(field.name, ".")).call(_context3, nestedField.name)
         });
       });
     }
@@ -206,20 +233,60 @@ function flattenNestedFields(fields) {
   })) || [];
   return _flatInstanceProperty__default["default"](result).call(result);
 }
+function unflattenNestedFields(flattenedFields) {
+  const reconstructed = [];
+  _forEachInstanceProperty__default["default"](flattenedFields).call(flattenedFields, field => {
+    const fieldNames = field.name.split('.');
+    let currentLevel = reconstructed;
+    _forEachInstanceProperty__default["default"](fieldNames).call(fieldNames, (name, index) => {
+      let existingField = _findInstanceProperty__default["default"](currentLevel).call(currentLevel, f => f.name === name);
+      if (!existingField) {
+        existingField = {
+          name,
+          fields: []
+        };
+        currentLevel.push(existingField);
+      }
+      if (index === fieldNames.length - 1) {
+        field.name;
+          const otherProps = _objectWithoutProperties(field, _excluded$1);
+        _Object$assign__default["default"](existingField, otherProps);
+      } else {
+        currentLevel = existingField.fields;
+      }
+    });
+  });
+  return reconstructed;
+}
+function getSelectedFields(fields) {
+  return _filterInstanceProperty__default["default"](fields).call(fields, field => field.isChecked);
+}
+function getFieldNames(fields) {
+  return _mapInstanceProperty__default["default"](fields).call(fields, field => field.name);
+}
+function checkRequiredFields(fields) {
+  return _mapInstanceProperty__default["default"](fields).call(fields, field => field.isRequired ? _objectSpread$5(_objectSpread$5({}, field), {}, {
+    isChecked: true
+  }) : field);
+}
+const getExportLogsLink = (projectKey, msg) => jsxRuntime.jsx(uiKit.Link, {
+  to: "/".concat(projectKey, "/operations/export/logs"),
+  children: msg
+});
 
 /*
  * This function is responsible for constructing the GraphQL query based on the export settings
  *
- * Depending on the type of export selection (all resources, only selected, or only matching/filtered) it constructs different types of queries:
- * - For 'all resources', it generates a query that fetches all fields and locales specified in the export settings.
- * - For 'only selected', it creates a query that fetches only the fields and locales of the selected resources. The ids of the selected resources are included in the query.
- * - The 'only matching' case is a placeholder for future development where a query will be constructed based on certain filtering criteria using the `where` parameter.
+ * Depending on the type of export selection (all, selected, or filtered) it constructs different types of queries:
+ * - For 'all', it generates a query that fetches all fields and locales specified in the export settings.
+ * - For 'selected', it creates a query that fetches only the fields and locales of the selected resources. The ids of the selected resources are included in the query.
+ * - The 'filtered' case is a placeholder for future development where a query will be constructed based on certain filtering criteria using the `where` parameter.
  */
 function buildGraphQuery(exportSettings) {
   var _context;
   const operation = resourceTypeToOperationName(exportSettings.resourceType);
-  switch (exportSettings.exportSelectionType) {
-    case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
+  switch (exportSettings.exportType) {
+    case EXPORT_TYPES.ALL:
       return gqlQueryBuilder.query({
         operation,
         fields: [{
@@ -230,7 +297,7 @@ function buildGraphQuery(exportSettings) {
         }],
         variables: {}
       });
-    case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
+    case EXPORT_TYPES.SELECTED:
       return gqlQueryBuilder.query({
         operation,
         fields: [{
@@ -243,11 +310,11 @@ function buildGraphQuery(exportSettings) {
           where: "id in (".concat(_mapInstanceProperty__default["default"](_context = exportSettings.selectedResourceIds).call(_context, id => "\"".concat(id, "\"")).join(', '), ")")
         }
       });
-    case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
+    case EXPORT_TYPES.FILTERED:
       // TODO: gql query for exporting filtered resources.
-      throw new UnexpectedSelectionTypeError(exportSettings.exportSelectionType);
+      throw new UnexpectedExportTypeError(exportSettings.exportType);
     default:
-      throw new UnexpectedSelectionTypeError(exportSettings.exportSelectionType);
+      throw new UnexpectedExportTypeError(exportSettings.exportType);
   }
 }
 
@@ -272,27 +339,31 @@ function buildFields(_ref) {
   return _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](fields).call(fields, field => {
     if (field.isLocalized) return _mapInstanceProperty__default["default"](locales).call(locales, locale => {
       var _context3, _context4, _context5;
-      const alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty__default["default"](_context3 = "".concat(field.key, "______")).call(_context3, locale));
-      return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(alias, ": ")).call(_context5, field.key, "(locale: \"")).call(_context4, locale, "\")");
+      const alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty__default["default"](_context3 = "".concat(field.name, "______")).call(_context3, locale));
+      return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(alias, ": ")).call(_context5, field.name, "(locale: \"")).call(_context4, locale, "\")");
     });else {
       if (isFilledArray(field.fields)) {
         return {
-          [field.key]: buildFields({
+          [field.name]: buildFields({
             fields: field.fields,
             locales
           })
         };
       }
-      return field.key;
+      return field.name;
     }
   })).call(_context2);
 }
 
-function validate(values) {
+function validate(_ref) {
+  let values = _valuesInstanceProperty__default["default"](_ref),
+    step = _ref.step;
   const errors = {
     fileName: {},
-    locales: {}
+    locales: {},
+    fields: {}
   };
+  // Always validate these fields (first and second steps)
   if (uiKit.TextInput.isEmpty(values.fileName)) {
     errors.fileName.missing = true;
   } else if (!/^[a-zA-Z0-9-_.]+$/.test(values.fileName)) {
@@ -301,6 +372,16 @@ function validate(values) {
   if (values.locales.length < 1) {
     errors.locales.missing = true;
   }
+  //
+
+  // Only validate these fields on the 2nd step
+  if (step === 2) {
+    var _context;
+    const checkedFields = _filterInstanceProperty__default["default"](_context = values.fields).call(_context, field => field.isChecked);
+    if (checkedFields.length < 2) {
+      errors.fields.missing = true;
+    }
+  }
   return omitEmpty__default["default"](errors);
 }
 
@@ -354,11 +435,6 @@ var messages = reactIntl.defineMessages({
     description: 'Export All selection',
     defaultMessage: 'Export all {resourceType} ({count})'
   },
-  exportOnlyMatchingResources: {
-    id: 'ExportResourcesModal.exportOnlyMatchingResources',
-    description: 'Export resources only matching search/filter',
-    defaultMessage: 'Export list matching search/filter ({count})'
-  },
   exportOnlySelectedResources: {
     id: 'ExportResourcesModal.exportOnlySelectedResources',
     description: 'Export only selected resources',
@@ -384,16 +460,6 @@ var messages = reactIntl.defineMessages({
     description: 'Exported columns and attributes based on table settings',
     defaultMessage: 'Exported columns/attributes based on table settings: {columnsCount}'
   },
-  appliedSearchTermsMessage: {
-    id: 'ExportResourcesModal.appliedSearchTermsMessage',
-    description: 'Applied Search Term(s)',
-    defaultMessage: 'Applied search term(s): {searchTermsCount}'
-  },
-  appliedFiltersMessage: {
-    id: 'ExportResourcesModal.appliedFiltersMessage',
-    description: 'Applied Filter(s)',
-    defaultMessage: 'Applied Filter(s): {filtersCount}'
-  },
   exportBasedOnMyViewsMessage: {
     id: 'ExportResourcesModal.exportBasedOnMyViewsMessage',
     description: 'Select Export setttings based on my views',
@@ -439,15 +505,34 @@ var messages = reactIntl.defineMessages({
     description: 'Label for "My Views" Select Field',
     defaultMessage: 'My Views'
   },
-  cancel: {
-    id: 'ExportResourcesModal.cancel',
-    description: 'Label for "Cancel" button',
-    defaultMessage: 'Cancel'
+  selectColumnsToExport: {
+    id: 'ExportResourcesModal.selectColumnsToExport',
+    defaultMessage: 'Select columns to export'
+  },
+  back: {
+    id: 'ExportResourcesModal.back',
+    description: 'Label for "Back" button',
+    defaultMessage: 'Back'
   },
   startExport: {
     id: 'ExportResourcesModal.startExport',
-    description: 'Label for "Start Export" button',
-    defaultMessage: 'Start Export'
+    description: 'Label for "Start export" button',
+    defaultMessage: 'Start export'
+  },
+  continue: {
+    id: 'ExportResourcesModal.continue',
+    description: 'Label for "Continue" button',
+    defaultMessage: 'Continue'
+  },
+  columnDefinitions: {
+    id: 'ExportResourcesModal.columnDefinitions',
+    description: 'Label for "Column Definitions" link',
+    defaultMessage: 'Column definitions'
+  },
+  allGeneralFields: {
+    id: 'ExportResourcesModal.allGeneralFields',
+    description: 'Label for "All general fields" checkbox',
+    defaultMessage: 'All general fields'
   }
 });
 
@@ -463,185 +548,14 @@ function getNewLine() {
   return jsxRuntime.jsx("br", {});
 }
 
-const smallTopPadding = /*#__PURE__*/react.css("padding-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" );
-const tagListContainer = _ref => {
-  let isNewTheme = _ref.isNewTheme;
-  return /*#__PURE__*/react.css("width:100%;display:flex;flex-wrap:wrap;display:inline-flex;padding:0 ", isNewTheme ? 0 : designSystem.customProperties.spacingL, ";&>div{margin:0 ", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingS, " 0;}" + ("" ), "" );
-};
-const tagListItem = /*#__PURE__*/react.css("margin:0 ", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingXs, " 0;display:flex;min-width:0;" + ("" ), "" );
-const divider = /*#__PURE__*/react.css("box-sizing:border-box;width:100%;margin:0;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";" + ("" ), "" );
-const notBold = {
-  name: "lugakg",
-  styles: "font-weight:normal"
-} ;
-const successMessage = /*#__PURE__*/react.css("margin-bottom:", designSystem.customProperties.spacingL, ";" + ("" ), "" );
-const styles = {
-  tagListItem,
-  tagListContainer,
-  smallTopPadding,
-  divider,
-  notBold,
-  successMessage
-};
-
-function TagList(props) {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  return jsxRuntime.jsx("div", {
-    css: styles.tagListContainer({
-      isNewTheme
-    }),
-    "data-testid": props['data-testid'],
-    children: _mapInstanceProperty__default["default"](react$1.Children).call(react$1.Children, props.children, tag => jsxRuntime.jsx("div", {
-      css: styles.tagListItem,
-      children: tag
-    }))
-  });
-}
-TagList.displayName = 'TagList';
-TagList.propTypes = {};
-
-function ownKeys$8(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$8(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$8(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$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-function AppliedFilters(_ref) {
-  let filters = _ref.filters,
-    onFilterRemove = _ref.onFilterRemove;
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (isNewTheme) return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
-    condensed: true,
-    isDefaultClosed: !Boolean(filters.length),
-    header: jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedFiltersMessage), {}, {
-        values: {
-          filtersCount: filters.length
-        }
-      })
-    }),
-    children: jsxRuntime.jsx(TagList, {
-      children: _mapInstanceProperty__default["default"](filters).call(filters, filter => jsxRuntime.jsx("div", {
-        "data-testid": "test-filter-".concat(filter),
-        children: jsxRuntime.jsx(uiKit.Tag, {
-          onRemove: () => {
-            onFilterRemove(filter);
-          },
-          children: filter
-        })
-      }, filter))
-    })
-  });
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "s",
-    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-      scale: "s",
-      alignItems: "flex-start",
-      children: [jsxRuntime.jsx(uiKit.AngleRightIcon, {
-        "data-testid": "test-arrowRight",
-        size: "medium",
-        color: "neutral60"
-      }), jsxRuntime.jsx(uiKit.Text.Body, {
-        isBold: true,
-        intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedFiltersMessage), {}, {
-          values: {
-            filtersCount: filters.length
-          }
-        })
-      })]
-    }), jsxRuntime.jsx(TagList, {
-      children: _mapInstanceProperty__default["default"](filters).call(filters, filter => jsxRuntime.jsx("div", {
-        "data-testid": "test-filter-".concat(filter),
-        children: jsxRuntime.jsx(uiKit.Tag, {
-          onRemove: () => {
-            onFilterRemove(filter);
-          },
-          children: filter
-        })
-      }, filter))
-    })]
-  });
-}
-AppliedFilters.propTypes = {};
-
-function ownKeys$7(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$7(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$7(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$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const IconPlaceholder = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1oion860"
-} )("width:", uiKit.customProperties.spacingM, ";" + ("" ));
-function AppliedSearchTerms(_ref) {
-  let appliedSearchTerms = _ref.appliedSearchTerms;
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (isNewTheme) return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
-    condensed: true,
-    isDefaultClosed: !Boolean(appliedSearchTerms.length),
-    header: jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: _objectSpread$7(_objectSpread$7({}, messages.appliedSearchTermsMessage), {}, {
-        values: {
-          searchTermsCount: appliedSearchTerms.length
-        }
-      })
-    }),
-    children: jsxRuntime.jsx(uiKit.Text.Body, {
-      children: appliedSearchTerms.join(', ')
-    })
-  });
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "s",
-    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-      scale: "s",
-      alignItems: "flex-start",
-      children: [jsxRuntime.jsx(uiKit.AngleRightIcon, {
-        "data-testid": "test-arrowRight",
-        size: "medium",
-        color: "neutral60"
-      }), jsxRuntime.jsx(uiKit.Text.Body, {
-        isBold: true,
-        intlMessage: _objectSpread$7(_objectSpread$7({}, messages.appliedSearchTermsMessage), {}, {
-          values: {
-            searchTermsCount: appliedSearchTerms.length
-          }
-        })
-      })]
-    }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-      scale: "s",
-      alignItems: "flex-start",
-      children: [jsxRuntime.jsx(IconPlaceholder, {}), jsxRuntime.jsx(uiKit.Text.Body, {
-        children: appliedSearchTerms.join(', ')
-      })]
-    })]
-  });
-}
-AppliedSearchTerms.propTypes = {};
-
-// TODO: @redesign cleanup
-function ExportBasedOnMyViewsSelectField() {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
-  return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-    scale: "m",
-    alignItems: "center",
-    children: [jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: messages.exportBasedOnMyViewsMessage
-    }), jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: messages.myViews
-    }), jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
-      max: themedValue(4, 7),
-      children: jsxRuntime.jsx(uiKit.SelectInput, {
-        isDisabled: true,
-        placeholder: "Default"
-      })
-    })]
-  });
-}
-
-function ownKeys$6(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$6(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$6(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$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function renderFileNameError(key) {
   switch (key) {
     case 'missing':
-      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages.missingFileNameError));
+      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages.missingFileNameError));
     case 'invalidInput':
-      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages.invalidFileNameError));
+      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages.invalidFileNameError));
     default:
       return null;
   }
@@ -649,353 +563,50 @@ function renderFileNameError(key) {
 function renderLocaleError(key) {
   switch (key) {
     case 'missing':
-      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages.missingLocaleError));
+      return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages.missingLocaleError));
     default:
       return null;
   }
 }
 
-function ownKeys$5(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$5(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$5(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$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-function FieldsRenderer(_ref) {
-  let fields = _ref.fields;
-  const allFields = flattenNestedFields(fields);
-  return jsxRuntime.jsx(TagList, {
-    children: _mapInstanceProperty__default["default"](allFields).call(allFields, field => jsxRuntime.jsx("div", {
-      "data-testid": "test-field-".concat(field.key),
-      children: jsxRuntime.jsx(uiKit.Tag, {
-        children: field.label || field.key
-      })
-    }, field.key))
-  });
-}
-FieldsRenderer.propTypes = {};
-function ExportFields(_ref2) {
-  let fields = _ref2.fields;
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (isNewTheme) return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
-    condensed: true,
-    isDefaultClosed: !Boolean(fields.length),
-    header: jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: _objectSpread$5(_objectSpread$5({}, messages.columnsMessage), {}, {
-        values: {
-          columnsCount: fields.length
-        }
-      })
-    }),
-    children: jsxRuntime.jsx(FieldsRenderer, {
-      fields: fields
-    })
-  });
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "s",
-    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-      scale: "s",
-      alignItems: "flex-start",
-      children: [jsxRuntime.jsx(uiKit.AngleRightIcon, {
-        "data-testid": "test-arrowRight",
-        size: "medium",
-        color: "neutral60"
-      }), jsxRuntime.jsx(uiKit.Text.Body, {
-        isBold: true,
-        intlMessage: _objectSpread$5(_objectSpread$5({}, messages.columnsMessage), {}, {
-          values: {
-            columnsCount: fields.length
-          }
-        })
-      })]
-    }), jsxRuntime.jsx(FieldsRenderer, {
-      fields: fields
-    })]
-  });
-}
-ExportFields.propTypes = {};
-
 function useExportResourcesContext() {
-  const context = react$1.useContext(ExportResourcesContext);
+  const context = React.useContext(ExportResourcesContext);
   if (!context) {
     throw new MissingExportResourceProviderError();
   }
   return context;
 }
 
-function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-function ExportSelectionRadioButtons() {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  const intl = reactIntl.useIntl();
-  const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik,
-    resourceType = _useExportResourcesCo.resourceType,
-    allResourcesCount = _useExportResourcesCo.allResourcesCount,
-    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
-    exportSelectionType = _useExportResourcesCo.exportSelectionType;
-  const resourceTypePlural = resourceTypeToPlural({
-    resourceType: resourceType
-  });
-  return jsxRuntime.jsx(uiKit.Spacings.Inline, {
-    scale: "xl",
-    children: jsxRuntime.jsxs(uiKit.RadioInput.Group, {
-      name: "exportSelectionType",
-      value: exportSelectionType,
-      direction: "inline",
-      directionProps: {
-        scale: 'xl'
-      },
-      onChange: formik.handleChange,
-      children: [jsxRuntime.jsx(uiKit.RadioInput.Option, {
-        value: EXPORT_SELECTION_TYPES.ALL_RESOURCES,
-        "data-testid": 'test-all-resources',
-        children: jsxRuntime.jsx(uiKit.Text.Body, {
-          isBold: !isNewTheme,
-          intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportAllResources), {}, {
-            values: {
-              resourceType: resourceTypePlural,
-              count: allResourcesCount
-            }
-          })
-        })
-      }), jsxRuntime.jsx(uiKit.RadioInput.Option, {
-        value: EXPORT_SELECTION_TYPES.ONLY_MATCHING,
-        "data-testid": 'test-only-matching',
-        isDisabled: !Boolean(matchingResourcesCount),
-        children: jsxRuntime.jsx(uiKit.Text.Body, {
-          isBold: !isNewTheme,
-          intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportOnlyMatchingResources), {}, {
-            values: {
-              count: matchingResourcesCount || intl.formatMessage(messages.nothingApplied)
-            }
-          })
-        })
-      }), jsxRuntime.jsx(uiKit.RadioInput.Option, {
-        value: EXPORT_SELECTION_TYPES.ONLY_SELECTED,
-        "data-testid": 'test-only-selected',
-        isDisabled: !Boolean(selectedResourceIds.length),
-        children: jsxRuntime.jsx(uiKit.Text.Body, {
-          isBold: !isNewTheme,
-          intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportOnlySelectedResources), {}, {
-            values: {
-              resourceType: resourceTypePlural,
-              count: selectedResourceIds.length
-            }
-          })
-        })
-      })]
-    })
-  });
-}
-
+const _excluded = ["isSelectedByDefault"];
 function ownKeys$3(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$3(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$3(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$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-function ExportTextMessage() {
-  const _useExportResourcesCo = useExportResourcesContext(),
-    resourceType = _useExportResourcesCo.resourceType,
-    allResourcesCount = _useExportResourcesCo.allResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
-    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    exportSelectionType = _useExportResourcesCo.exportSelectionType;
-  const resourceTypePlural = resourceTypeToPlural({
-    resourceType: resourceType
-  });
-  switch (exportSelectionType) {
-    case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$3(_objectSpread$3({}, messages.exportAllMessage), {}, {
-          values: {
-            count: allResourcesCount,
-            resourceType: resourceTypePlural,
-            b: getBold
-          }
-        })
-      });
-    case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$3(_objectSpread$3({}, messages.exportMatchingMessage), {}, {
-          values: {
-            count: matchingResourcesCount,
-            resourceType: resourceTypePlural,
-            b: getBold
-          }
-        })
-      });
-    case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$3(_objectSpread$3({}, messages.exportSelectedMessage), {}, {
-          values: {
-            count: selectedResourceIds.length,
-            resourceType: resourceTypePlural,
-            b: getBold
-          }
-        })
-      });
-    default:
-      throw new UnexpectedSelectionTypeError(exportSelectionType);
-  }
-}
-
-const ExportSelection = () => {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik,
-    exportSelectionType = _useExportResourcesCo.exportSelectionType;
-  const onAppliedFilterRemove = filter => {
-    var _context;
-    formik.setFieldValue('appliedFilters', _filterInstanceProperty__default["default"](_context = _valuesInstanceProperty__default["default"](formik).appliedFilters).call(_context, appliedFilter => appliedFilter !== filter));
-  };
-  if (isNewTheme) return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "xl",
-    children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-      scale: "l",
-      children: [jsxRuntime.jsx(uiKit.Text.Headline, {
-        as: "h2",
-        intlMessage: messages.exportSelection
-      }), jsxRuntime.jsx(ExportSelectionRadioButtons, {}), jsxRuntime.jsx(ExportTextMessage, {})]
-    }), exportSelectionType === EXPORT_SELECTION_TYPES.ONLY_MATCHING && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(ExportBasedOnMyViewsSelectField, {}), jsxRuntime.jsx(AppliedSearchTerms, {
-        appliedSearchTerms: _valuesInstanceProperty__default["default"](formik).appliedSearchTerms
-      }), jsxRuntime.jsx(AppliedFilters, {
-        filters: _valuesInstanceProperty__default["default"](formik).appliedFilters,
-        onFilterRemove: onAppliedFilterRemove
-      })]
-    }), _valuesInstanceProperty__default["default"](formik).fields.length > 0 && jsxRuntime.jsx(ExportFields, {
-      fields: _valuesInstanceProperty__default["default"](formik).fields
-    })]
-  });
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "s",
-    children: [jsxRuntime.jsx(uiKit.Text.Body, {
-      isBold: true,
-      intlMessage: messages.exportSelection
-    }), jsxRuntime.jsxs(uiKit.Card, {
-      theme: "dark",
-      type: "raised",
-      insetScale: "none",
-      children: [jsxRuntime.jsx(uiKit.Spacings.Inset, {
-        scale: "m",
-        children: jsxRuntime.jsx(ExportSelectionRadioButtons, {})
-      }), jsxRuntime.jsx("div", {
-        css: styles.divider
-      }), jsxRuntime.jsx(uiKit.Spacings.Inset, {
-        scale: "m",
-        children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-          scale: "l",
-          children: [jsxRuntime.jsx(ExportTextMessage, {}), exportSelectionType === EXPORT_SELECTION_TYPES.ONLY_MATCHING && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [jsxRuntime.jsx(ExportBasedOnMyViewsSelectField, {}), jsxRuntime.jsx(AppliedSearchTerms, {
-              appliedSearchTerms: _valuesInstanceProperty__default["default"](formik).appliedSearchTerms
-            }), jsxRuntime.jsx(AppliedFilters, {
-              filters: _valuesInstanceProperty__default["default"](formik).appliedFilters,
-              onFilterRemove: onAppliedFilterRemove
-            })]
-          }), _valuesInstanceProperty__default["default"](formik).fields.length > 0 && jsxRuntime.jsx(ExportFields, {
-            fields: _valuesInstanceProperty__default["default"](formik).fields
-          })]
-        })
-      })]
-    })]
-  });
-};
-
-function ownKeys$2(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$2(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$2(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$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const ExportProperties = props => {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (typeof props.renderProperties !== 'function') return null;
-  if (isNewTheme) return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "m",
-    children: [jsxRuntime.jsx(uiKit.Text.Headline, {
-      as: "h2",
-      intlMessage: messages.propertiesPanelLabel
-    }), jsxRuntime.jsx("div", {
-      children: props.renderProperties()
-    })]
-  });
-  return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
-    header: jsxRuntime.jsx(uiKit.Text.Body, {
-      isBold: true,
-      intlMessage: _objectSpread$2({}, messages.propertiesPanelLabel)
-    }),
-    children: props.renderProperties()
-  });
-};
-ExportProperties.propTypes = {};
-
-function ownKeys$1(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$1(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$1(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$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const outputFormatOptions = [{
-  value: OUTPUT_FORMATS.CSV,
-  label: 'CSV'
-}, {
-  value: OUTPUT_FORMATS.JSON,
-  label: 'JSON'
-}];
-function mapLocalesToOptions(locales) {
-  return _mapInstanceProperty__default["default"](locales).call(locales, locale => ({
-    value: locale,
-    label: locale
-  }));
-}
-function ExportFileSettings(props) {
-  const intl = reactIntl.useIntl();
-  const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik;
-  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => {
-      var _applicationContext$p;
-      return {
-        locale: applicationContext.dataLocale,
-        locales: ((_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.languages) || []
-      };
-    }),
-    locales = _useApplicationContex.locales,
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$3(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const useInitialValues = props => {
+  var _context;
+  const todayFormatted = moment__default["default"]().format('DD-MM-YY_HH-mm');
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
+      locale: applicationContext.dataLocale
+    })),
     locale = _useApplicationContex.locale;
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "m",
-    children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$1(_objectSpread$1({}, formik.getFieldProps('outputFormat')), {}, {
-      title: intl.formatMessage(messages.outputFormat),
-      options: outputFormatOptions
-    })), jsxRuntime.jsx(uiKit.TextField, _objectSpread$1(_objectSpread$1({
-      title: intl.formatMessage(messages.fileName)
-    }, formik.getFieldProps('fileName')), {}, {
-      touched: formik.touched.fileName,
-      errors: formik.errors.fileName,
-      renderError: renderFileNameError
-    })), jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-      scale: "xs",
-      children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$1(_objectSpread$1({
-        id: "locales",
-        title: intl.formatMessage(messages.locale),
-        options: mapLocalesToOptions(locales),
-        isMulti: true
-      }, formik.getFieldProps('locales')), {}, {
-        onChange: e => {
-          formik.handleChange(e);
-          formik.setFieldValue('isAllLocalesChecked', false);
-        },
-        touched: formik.touched.locales,
-        errors: formik.errors.locales,
-        renderError: renderLocaleError
-      })), jsxRuntime.jsx(uiKit.CheckboxInput, {
-        name: "isAllLocalesChecked",
-        isChecked: _valuesInstanceProperty__default["default"](formik).isAllLocalesChecked,
-        onChange: e => {
-          if (e.target.checked) formik.setFieldValue('locales', locales);else formik.setFieldValue('locales', [locale]);
-          formik.handleChange(e);
-        },
-        children: intl.formatMessage(messages.selectAllLocales)
-      })]
-    }), props.showExportSelection && jsxRuntime.jsx(ExportSelection, {}), jsxRuntime.jsx(ExportProperties, {
-      renderProperties: props.renderProperties
-    })]
+  const fields = _mapInstanceProperty__default["default"](_context = flattenNestedFields(props.fields)).call(_context, _ref => {
+    let isSelectedByDefault = _ref.isSelectedByDefault,
+      field = _objectWithoutProperties(_ref, _excluded);
+    return _objectSpread$3(_objectSpread$3({}, field), {}, {
+      isChecked: isSelectedByDefault !== null && isSelectedByDefault !== void 0 ? isSelectedByDefault : true
+    });
   });
-}
-ExportFileSettings.displayName = 'ExportFileSettings';
-ExportFileSettings.propTypes = {};
-
-const ExportResourcesContext = /*#__PURE__*/react$1.createContext();
+  return React__default["default"].useMemo(() => {
+    var _context2;
+    return {
+      outputFormat: props.outputFormat,
+      fileName: _concatInstanceProperty__default["default"](_context2 = "".concat(resourceTypeToPlural({
+        resourceType: props.resourceType,
+        isUpperCase: true
+      }), "_Export_")).call(_context2, todayFormatted),
+      locales: [locale],
+      fields: checkRequiredFields(fields)
+    };
+  }, [props, locale, todayFormatted, fields]);
+};
 
 async function createExportOperation(_ref) {
   let fileName = _ref.fileName,
@@ -1024,35 +635,8 @@ async function createExportOperation(_ref) {
   return response;
 }
 
-PropTypes__default["default"].shape({
-  resourceType: PropTypes__default["default"].string.isRequired,
-  outputFormat: PropTypes__default["default"].string,
-  closeModal: PropTypes__default["default"].func.isRequired,
-  allResourcesCount: PropTypes__default["default"].number.isRequired,
-  matchingResourcesCount: PropTypes__default["default"].number,
-  selectedResourceIds: PropTypes__default["default"].array,
-  showExportSelection: PropTypes__default["default"].bool,
-  // TODO: Circular reference
-  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-    key: PropTypes__default["default"].string.isRequired,
-    label: PropTypes__default["default"].string,
-    isLocalized: PropTypes__default["default"].bool,
-    fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-      key: PropTypes__default["default"].string.isRequired,
-      label: PropTypes__default["default"].string,
-      isLocalized: PropTypes__default["default"].bool
-    }))
-  })).isRequired,
-  exportSelectionType: PropTypes__default["default"].string,
-  appliedSearchTerms: PropTypes__default["default"].array,
-  appliedFilters: PropTypes__default["default"].array,
-  renderProperties: PropTypes__default["default"].func
-}).isRequired;
-
-const ExportResourcesContextProvider = props => {
-  var _context2;
+const useStartExportOperation = props => {
   const intl = reactIntl.useIntl();
-  const todayFormatted = moment__default["default"]().format('DD-MM-YY_HH-mm');
   const asyncDispatch = sdk.useAsyncDispatch();
   const showNotification = actionsGlobal.useShowNotification();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => {
@@ -1062,23 +646,21 @@ const ExportResourcesContextProvider = props => {
         projectKey: (_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.key
       };
     }),
-    projectKey = _useApplicationContex.projectKey,
-    locale = _useApplicationContex.locale;
-  const onSubmit = async values => {
+    projectKey = _useApplicationContex.projectKey;
+  const startExportOperation = async values => {
     const graphQuery = buildGraphQuery({
       resourceType: props.resourceType,
-      exportSelectionType: props.exportSelectionType,
+      exportType: props.exportType,
       selectedResourceIds: props.selectedResourceIds,
-      fields: values.fields,
+      fields: unflattenNestedFields(getSelectedFields(values.fields)),
       locales: values.locales
     });
     try {
-      var _context;
       const response = await createExportOperation({
         fileName: appendCsvOrJsonExtensionIfAbsent(values.fileName, values.outputFormat),
         fileFormat: values.outputFormat,
         locales: values.locales,
-        columns: extendColumns(_mapInstanceProperty__default["default"](_context = flattenNestedFields(values.fields)).call(_context, field => field.key), props.resourceType),
+        columns: extendColumns(getFieldNames(getSelectedFields(values.fields)), props.resourceType),
         projectKey,
         graphQuery,
         asyncDispatchFn: asyncDispatch
@@ -1107,93 +689,317 @@ const ExportResourcesContextProvider = props => {
         errors
       });
     } finally {
-      props.closeModal();
+      if (typeof props.onClose === 'function') props.onClose();
+    }
+  };
+  return {
+    startExportOperation
+  };
+};
+
+function ownKeys$2(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$2(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$2(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$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ExportTextMessage() {
+  const _useExportResourcesCo = useExportResourcesContext(),
+    resourceType = _useExportResourcesCo.resourceType,
+    totalResourcesCount = _useExportResourcesCo.totalResourcesCount,
+    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
+    exportType = _useExportResourcesCo.exportType;
+  const resourceTypePlural = resourceTypeToPlural({
+    resourceType: resourceType
+  });
+  let message;
+  let count;
+  switch (exportType) {
+    case EXPORT_TYPES.ALL:
+      message = messages.exportAllMessage;
+      count = totalResourcesCount;
+      break;
+    case EXPORT_TYPES.SELECTED:
+      message = messages.exportSelectedMessage;
+      count = selectedResourceIds.length;
+      break;
+    default:
+      throw new UnexpectedExportTypeError(exportType);
+  }
+  return jsxRuntime.jsx(uiKit.Text.Body, {
+    "data-testid": "export-description",
+    intlMessage: _objectSpread$2(_objectSpread$2({}, message), {}, {
+      values: {
+        count: count,
+        resourceType: resourceTypePlural,
+        b: getBold
+      }
+    })
+  });
+}
+
+const ExportFileSettingsStep = () => {
+  const intl = reactIntl.useIntl();
+  const _useExportResourcesCo = useExportResourcesContext(),
+    formik = _useExportResourcesCo.formik;
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => {
+      var _applicationContext$p;
+      return {
+        locale: applicationContext.dataLocale,
+        locales: ((_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.languages) || []
+      };
+    }),
+    locales = _useApplicationContex.locales,
+    locale = _useApplicationContex.locale;
+  const areAllLocalesChecked = _valuesInstanceProperty__default["default"](formik).locales.length === locales.length;
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "xxxl",
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+      scale: "l",
+      children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+        alignItems: "center",
+        children: [jsxRuntime.jsx(uiKit.ExportIcon, {
+          size: "medium",
+          color: "neutral60"
+        }), jsxRuntime.jsx(ExportTextMessage, {})]
+      }), jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+        scale: "m",
+        children: [jsxRuntime.jsx(uiKit.SelectField, {
+          name: "outputFormat",
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: _valuesInstanceProperty__default["default"](formik).outputFormat,
+          title: intl.formatMessage(messages.outputFormat),
+          options: OUTPUT_FORMAT_OPTIONS
+        }), 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: formik.errors.fileName,
+          renderError: renderFileNameError
+        }), jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+          scale: "xs",
+          children: [jsxRuntime.jsx(uiKit.SelectField, {
+            id: "locales",
+            name: "locales",
+            value: _valuesInstanceProperty__default["default"](formik).locales,
+            title: intl.formatMessage(messages.locale),
+            options: mapLocalesToOptions(locales),
+            isMulti: true,
+            onChange: formik.handleChange,
+            onBlur: formik.handleBlur,
+            touched: formik.touched.locales,
+            errors: formik.errors.locales,
+            renderError: renderLocaleError
+          }), jsxRuntime.jsx(uiKit.CheckboxInput, {
+            isChecked: areAllLocalesChecked,
+            onChange: e => {
+              if (e.target.checked) formik.setFieldValue('locales', locales);else formik.setFieldValue('locales', [locale]);
+            },
+            children: intl.formatMessage(messages.selectAllLocales)
+          })]
+        })]
+      })]
+    }), jsxRuntime.jsx(uiKit.Spacings.Inline, {
+      justifyContent: "flex-end",
+      children: jsxRuntime.jsx(uiKit.PrimaryButton, {
+        label: intl.formatMessage(messages.continue),
+        onClick: formik.submitForm,
+        isDisabled: !formik.isValid
+      })
+    })]
+  });
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$1(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$1(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const StyledCard = /*#__PURE__*/_styled__default["default"](uiKit.Card, {
+  target: "e1ocu3bb2"
+} )({
+  name: "1jtoq3b",
+  styles: "border-radius:4px 0px 0px 4px;&>div{height:490px;overflow-y:auto;}"
+} );
+const StyledCardLeft = /*#__PURE__*/_styled__default["default"](StyledCard, {
+  target: "e1ocu3bb1"
+} )({
+  name: "65buvr",
+  styles: "background-color:#f9f9fb"
+} );
+const StyledCardRight = /*#__PURE__*/_styled__default["default"](StyledCard, {
+  target: "e1ocu3bb0"
+} )({
+  name: "1oktwfs",
+  styles: "border-radius:0px 4px 4px 0px;border-left:0"
+} );
+const ExportFieldsSelectionStep = () => {
+  var _context, _context2, _context4;
+  const intl = reactIntl.useIntl();
+  const _useExportResourcesCo = useExportResourcesContext(),
+    formik = _useExportResourcesCo.formik,
+    setCurrentStep = _useExportResourcesCo.setCurrentStep,
+    resourceType = _useExportResourcesCo.resourceType;
+  const areAllFieldsChecked = _everyInstanceProperty__default["default"](_context = _valuesInstanceProperty__default["default"](formik).fields).call(_context, field => field.isChecked);
+  const isAtLeastOneFieldChecked = _someInstanceProperty__default["default"](_context2 = _valuesInstanceProperty__default["default"](formik).fields).call(_context2, field => field.isChecked);
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "xl",
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+      scale: "m",
+      children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+        justifyContent: "space-between",
+        children: [jsxRuntime.jsx(uiKit.Text.Body, {
+          intlMessage: messages.selectColumnsToExport
+        }), jsxRuntime.jsx(uiKit.Link, {
+          isExternal: true,
+          tone: "secondary",
+          intlMessage: messages.columnDefinitions,
+          to: COLUMN_DEFINITIONS_URLS[resourceType]
+        })]
+      }), jsxRuntime.jsxs(uiKit.Grid, {
+        gridAutoFlow: "column",
+        gridTemplateColumns: "".concat(uiKit.customProperties.constraint5, " auto"),
+        children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(StyledCardLeft, {
+            insetScale: "l",
+            children: jsxRuntime.jsx(uiKit.CheckboxInput, {
+              isIndeterminate: !areAllFieldsChecked && isAtLeastOneFieldChecked,
+              isChecked: areAllFieldsChecked,
+              onChange: e => {
+                var _context3;
+                formik.setFieldValue('fields', _mapInstanceProperty__default["default"](_context3 = _valuesInstanceProperty__default["default"](formik).fields).call(_context3, field => _objectSpread$1(_objectSpread$1({}, field), {}, {
+                  isChecked: field.isRequired ? true : e.target.checked
+                })));
+              },
+              children: jsxRuntime.jsx(uiKit.Text.Body, {
+                intlMessage: messages.allGeneralFields
+              })
+            })
+          })
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(StyledCardRight, {
+            insetScale: "l",
+            children: _mapInstanceProperty__default["default"](_context4 = _valuesInstanceProperty__default["default"](formik).fields).call(_context4, field => jsxRuntime.jsx(uiKit.CheckboxInput, {
+              isReadOnly: field.isRequired,
+              isChecked: field.isChecked,
+              onChange: e => {
+                var _context5;
+                formik.setFieldValue('fields', _mapInstanceProperty__default["default"](_context5 = _valuesInstanceProperty__default["default"](formik).fields).call(_context5, _field => field.name === _field.name ? _objectSpread$1(_objectSpread$1({}, _field), {}, {
+                  isChecked: e.target.checked
+                }) : _field));
+              },
+              children: jsxRuntime.jsxs(uiKit.Text.Body, {
+                children: [field.label, " ", field.isRequired && '*']
+              })
+            }, field.name))
+          })
+        })]
+      })]
+    }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+      scale: "m",
+      justifyContent: "flex-end",
+      children: [jsxRuntime.jsx(uiKit.SecondaryButton, {
+        label: intl.formatMessage(messages.back),
+        onClick: () => setCurrentStep(1)
+      }), jsxRuntime.jsx(uiKit.PrimaryButton, {
+        label: intl.formatMessage(messages.startExport),
+        onClick: formik.submitForm,
+        isDisabled: !formik.isValid
+      })]
+    })]
+  });
+};
+
+const ExportResourcesContext = /*#__PURE__*/React.createContext();
+
+PropTypes__default["default"].shape({
+  resourceType: PropTypes__default["default"].string.isRequired,
+  outputFormat: PropTypes__default["default"].string,
+  onClose: PropTypes__default["default"].func,
+  totalResourcesCount: PropTypes__default["default"].number.isRequired,
+  selectedResourceIds: PropTypes__default["default"].array,
+  // TODO: Circular reference
+  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    name: PropTypes__default["default"].string.isRequired,
+    label: PropTypes__default["default"].string,
+    isLocalized: PropTypes__default["default"].bool,
+    fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+      name: PropTypes__default["default"].string.isRequired,
+      label: PropTypes__default["default"].string,
+      isLocalized: PropTypes__default["default"].bool,
+      isSelectedByDefault: PropTypes__default["default"].bool,
+      isRequired: PropTypes__default["default"].bool
+    }))
+  })).isRequired,
+  exportType: PropTypes__default["default"].string,
+  renderProperties: PropTypes__default["default"].func
+}).isRequired;
+
+const ExportResourcesProvider = props => {
+  const _useStartExportOperat = useStartExportOperation(props),
+    startExportOperation = _useStartExportOperat.startExportOperation;
+  const initialValues = useInitialValues(props);
+  const _React$useState = React__default["default"].useState(1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentStep = _React$useState2[0],
+    setCurrentStep = _React$useState2[1];
+  const onSubmit = async values => {
+    if (currentStep === 1) {
+      setCurrentStep(2);
+    } else {
+      startExportOperation(values);
     }
   };
   const formik$1 = formik.useFormik({
-    initialValues: {
-      outputFormat: props.outputFormat,
-      fileName: _concatInstanceProperty__default["default"](_context2 = "".concat(resourceTypeToPlural({
-        resourceType: props.resourceType,
-        isUpperCase: true
-      }), "_Export_")).call(_context2, todayFormatted),
-      locales: [locale],
-      fields: props.fields,
-      appliedSearchTerms: props.appliedSearchTerms,
-      appliedFilters: props.appliedFilters,
-      isAllLocalesChecked: false
-    },
-    validate,
+    initialValues,
+    validate: values => validate({
+      values,
+      step: currentStep
+    }),
     onSubmit
   });
+  React__default["default"].useEffect(() => {
+    formik$1.validateForm();
+  }, [currentStep]);
   return jsxRuntime.jsx(ExportResourcesContext.Provider, {
     value: {
+      currentStep,
+      setCurrentStep,
       formik: formik$1,
       resourceType: props.resourceType,
-      exportSelectionType: props.exportSelectionType,
-      allResourcesCount: props.allResourcesCount,
-      matchingResourcesCount: props.matchingResourcesCount,
+      exportType: props.exportType,
+      totalResourcesCount: props.totalResourcesCount,
       selectedResourceIds: props.selectedResourceIds
     },
     children: props.children
   });
 };
-ExportResourcesContextProvider.displayName = 'ExportResourcesContextProvider';
-ExportResourcesContextProvider.propTypes = {};
-const getExportLogsLink = (projectKey, msg) => jsxRuntime.jsx(uiKit.Link, {
-  to: "/".concat(projectKey, "/operations/export/logs"),
-  children: msg
-});
+ExportResourcesProvider.displayName = 'ExportResourcesProvider';
+ExportResourcesProvider.propTypes = {};
+
+const CurrentStep = () => {
+  const _useExportResourcesCo = useExportResourcesContext(),
+    currentStep = _useExportResourcesCo.currentStep;
+  const steps = {
+    1: jsxRuntime.jsx(ExportFileSettingsStep, {}),
+    2: jsxRuntime.jsx(ExportFieldsSelectionStep, {})
+  };
+  return steps[currentStep] || null;
+};
 
-const _excluded = ["renderProperties", "showExportSelection"];
 function ownKeys(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(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(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(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const ExportResourcesModal = _ref => {
-  let renderProperties = _ref.renderProperties,
-    showExportSelection = _ref.showExportSelection,
-    props = _objectWithoutProperties(_ref, _excluded);
+const ExportResourcesModal = props => {
   const intl = reactIntl.useIntl();
   const resourceTypePlural = resourceTypeToPlural({
     resourceType: props.resourceType
   });
-  return jsxRuntime.jsx(ExportResourcesContextProvider, _objectSpread(_objectSpread({}, props), {}, {
-    children: jsxRuntime.jsx(ExportResourcesContext.Consumer, {
-      children: _ref2 => {
-        let formik = _ref2.formik;
-        return jsxRuntime.jsx(applicationComponents.InfoDialog, {
-          isOpen: true,
-          title: intl.formatMessage(messages.modalTitle, {
-            resourceType: resourceTypePlural
-          }),
-          onClose: props.closeModal,
-          children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-            scale: "xxxl",
-            children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-              scale: "l",
-              children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-                alignItems: "center",
-                children: [jsxRuntime.jsx(uiKit.ExportIcon, {
-                  size: "medium",
-                  color: "neutral60"
-                }), jsxRuntime.jsx(ExportTextMessage, {})]
-              }), jsxRuntime.jsx(ExportFileSettings, {
-                renderProperties: renderProperties,
-                showExportSelection: showExportSelection
-              })]
-            }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-              justifyContent: "flex-end",
-              scale: "m",
-              children: [jsxRuntime.jsx(uiKit.SecondaryButton, {
-                label: intl.formatMessage(messages.cancel),
-                onClick: props.closeModal
-              }), jsxRuntime.jsx(uiKit.PrimaryButton, {
-                label: intl.formatMessage(messages.startExport),
-                onClick: formik.submitForm
-              })]
-            })]
-          })
-        });
-      }
+  return jsxRuntime.jsx(ExportResourcesProvider, _objectSpread(_objectSpread({}, props), {}, {
+    children: jsxRuntime.jsx(applicationComponents.InfoDialog, {
+      isOpen: true,
+      title: intl.formatMessage(messages.modalTitle, {
+        resourceType: resourceTypePlural
+      }),
+      onClose: props.onClose,
+      size: 16,
+      children: jsxRuntime.jsx(CurrentStep, {})
     })
   }));
 };
@@ -1201,14 +1007,10 @@ ExportResourcesModal.displayName = 'ExportResourcesModal';
 ExportResourcesModal.propTypes = {};
 ExportResourcesModal.defaultProps = {
   selectedResourceIds: [],
-  appliedSearchTerms: [],
-  appliedFilters: [],
-  matchingResourcesCount: 0,
-  exportSelectionType: EXPORT_SELECTION_TYPES.ALL_RESOURCES,
-  outputFormat: OUTPUT_FORMATS.CSV,
-  showExportSelection: false
+  exportType: EXPORT_TYPES.ALL,
+  outputFormat: OUTPUT_FORMATS.CSV
 };
 
 exports.EXPORTABLE_RESOURCES = EXPORTABLE_RESOURCES;
-exports.EXPORT_SELECTION_TYPES = EXPORT_SELECTION_TYPES;
+exports.EXPORT_TYPES = EXPORT_TYPES;
 exports["default"] = ExportResourcesModal;