@commercetools-frontend-extensions/export-resources-modal 1.0.8 → 1.2.0

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

@@ -25,6 +25,7 @@ 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 _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var PropTypes = require('prop-types');
 var formik = require('formik');
@@ -35,8 +36,8 @@ var uiKit = require('@commercetools-frontend/ui-kit');
 var omitEmpty = require('omit-empty-es');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
-var react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
+var react$1 = require('@emotion/react');
 var _styled = require('@emotion/styled/base');
 var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
@@ -58,6 +59,7 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 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 PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var moment__default = /*#__PURE__*/_interopDefault(moment);
 var omitEmpty__default = /*#__PURE__*/_interopDefault(omitEmpty);
@@ -210,6 +212,9 @@ function resourceTypeToOperationName(resourceType) {
 function replaceSpecialCharsWithUnderscore(string) {
   return string.replace(/[^a-zA-Z0-9]/g, '_');
 }
+function isFilledArray(maybeArray) {
+  return _Array$isArray__default["default"](maybeArray) && maybeArray.length;
+}
 
 function buildGraphQuery(exportSettings) {
   var _context;
@@ -221,8 +226,8 @@ function buildGraphQuery(exportSettings) {
       return gqlQueryBuilder.query({
         operation: operation,
         fields: [{
-          results: buildColumns({
-            columns: exportSettings.columns,
+          results: buildFields({
+            fields: exportSettings.fields,
             languages: exportSettings.languages
           })
         }],
@@ -233,8 +238,8 @@ function buildGraphQuery(exportSettings) {
       return gqlQueryBuilder.query({
         operation: operation,
         fields: [{
-          results: buildColumns({
-            columns: exportSettings.columns,
+          results: buildFields({
+            fields: exportSettings.fields,
             languages: exportSettings.languages
           })
         }],
@@ -254,18 +259,27 @@ function buildGraphQuery(exportSettings) {
   }
 }
 
-function buildColumns(_ref) {
+function buildFields(_ref) {
   var _context2;
 
-  var columns = _ref.columns,
+  var fields = _ref.fields,
       languages = _ref.languages;
-  return _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](columns).call(columns, function (column) {
-    if (column.isLocalized) return _mapInstanceProperty__default["default"](languages).call(languages, function (language) {
+  return _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](fields).call(fields, function (field) {
+    if (field.isLocalized) return _mapInstanceProperty__default["default"](languages).call(languages, function (language) {
       var _context3, _context4, _context5;
 
-      var alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty__default["default"](_context3 = "".concat(column.key, "_")).call(_context3, language));
-      return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(alias, ": ")).call(_context5, column.key, "(locale: \"")).call(_context4, language, "\")");
-    });else return column.key;
+      var alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty__default["default"](_context3 = "".concat(field.key, "_")).call(_context3, language));
+      return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(alias, ": ")).call(_context5, field.key, "(locale: \"")).call(_context4, language, "\")");
+    });else {
+      if (isFilledArray(field.fields)) {
+        return _defineProperty({}, field.key, buildFields({
+          fields: field.fields,
+          languages: languages
+        }));
+      }
+
+      return field.key;
+    }
   })).call(_context2);
 }
 
@@ -342,23 +356,23 @@ var messages = reactIntl.defineMessages({
   },
   columnsMessage: {
     id: 'ExportResourcesModal.columnsMessage',
-    description: 'Exported columns based on table settings',
-    defaultMessage: '<b>Exported columns based on table settings:</b> {columnsCount}'
+    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: '<b>Applied search term(s):</b> {searchTermsCount}'
+    defaultMessage: 'Applied search term(s): {searchTermsCount}'
   },
   appliedFiltersMessage: {
     id: 'ExportResourcesModal.appliedFiltersMessage',
     description: 'Applied Filter(s)',
-    defaultMessage: '<b>Applied Filter(s):</b> {filtersCount}'
+    defaultMessage: 'Applied Filter(s): {filtersCount}'
   },
   exportBasedOnMyViewsMessage: {
     id: 'ExportResourcesModal.exportBasedOnMyViewsMessage',
     description: 'Select Export setttings based on my views',
-    defaultMessage: 'Select export settings based on <b>My views:</b>'
+    defaultMessage: 'Select export settings based on:'
   },
   propertiesPanelLabel: {
     id: 'ExportResourcesModal.propertiesPanelLabel',
@@ -414,6 +428,11 @@ var messages = reactIntl.defineMessages({
     id: 'ExportResourcesModal.missingLanguageError',
     description: 'Error when no local language is selected',
     defaultMessage: 'Please select at least one local language'
+  },
+  myViews: {
+    id: 'ExportResourcesModal.myViews',
+    description: 'Label for "My Views" Select Field',
+    defaultMessage: 'My Views'
   }
 });
 
@@ -427,9 +446,16 @@ PropTypes__default["default"].shape({
   allResourcesCount: PropTypes__default["default"].number.isRequired,
   matchingResourcesCount: PropTypes__default["default"].number,
   selectedResourceIds: PropTypes__default["default"].array,
-  columns: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+  // TODO: Circular reference
+  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     key: PropTypes__default["default"].string.isRequired,
-    isLocalized: PropTypes__default["default"].bool
+    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,
@@ -476,7 +502,7 @@ var ExportResourcesContextProvider = function ExportResourcesContextProvider(pro
         isUpperCase: true
       }), "_Export_")).call(_context, todayFormatted),
       languages: [language],
-      columns: props.columns,
+      fields: props.fields,
       appliedSearchTerms: props.appliedSearchTerms,
       appliedFilters: props.appliedFilters,
       exportSelectionType: props.exportSelectionType,
@@ -518,7 +544,12 @@ function useExportResourcesContext() {
 }
 
 var smallTopPadding = /*#__PURE__*/react$1.css("padding-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" );
-var tagListContainer = /*#__PURE__*/react$1.css("width:100%;display:flex;flex-wrap:wrap;display:inline-flex;padding:0 ", designSystem.customProperties.spacingL, ";&>div{margin:0 ", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingS, " 0;}" + ("" ), "" );
+
+var tagListContainer = function tagListContainer(_ref) {
+  var isNewTheme = _ref.isNewTheme;
+  return /*#__PURE__*/react$1.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;}" + ("" ), "" );
+};
+
 var tagListItem = /*#__PURE__*/react$1.css("margin:0 ", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingXs, " 0;display:flex;min-width:0;" + ("" ), "" );
 var divider = /*#__PURE__*/react$1.css("box-sizing:border-box;width:100%;margin:0;border:0;border-top:1px solid ", designSystem.customProperties.colorNeutral60, ";" + ("" ), "" );
 var notBold = {
@@ -535,7 +566,13 @@ var styles = {
   successMessage: successMessage
 };
 
+function ownKeys$a(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 function ExportSelectionRadioButtons() {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var intl = reactIntl.useIntl();
 
   var _useExportResourcesCo = useExportResourcesContext(),
@@ -561,29 +598,38 @@ function ExportSelectionRadioButtons() {
       children: [jsxRuntime.jsx(uiKit.RadioInput.Option, {
         value: EXPORT_SELECTION_TYPES.ALL_RESOURCES,
         "data-testid": 'test-all-resources',
-        children: jsxRuntime.jsx("b", {
-          children: intl.formatMessage(messages.exportAllResources, {
-            resourceType: resourceTypePlural,
-            count: allResourcesCount
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          isBold: !isNewTheme,
+          intlMessage: _objectSpread$a(_objectSpread$a({}, 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("b", {
-          children: intl.formatMessage(messages.exportOnlyMatchingResources, {
-            count: matchingResourcesCount || intl.formatMessage(messages.nothingApplied)
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          isBold: !isNewTheme,
+          intlMessage: _objectSpread$a(_objectSpread$a({}, 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("b", {
-          children: intl.formatMessage(messages.exportOnlySelectedResources, {
-            resourceType: resourceTypePlural,
-            count: selectedResourceIds.length
+        children: jsxRuntime.jsx(uiKit.Text.Body, {
+          isBold: !isNewTheme,
+          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportOnlySelectedResources), {}, {
+            values: {
+              resourceType: resourceTypePlural,
+              count: selectedResourceIds.length
+            }
           })
         })
       })]
@@ -599,9 +645,9 @@ function getBold(msg) {
   });
 }
 
-function ownKeys$a(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 function ExportTextMessage() {
   var _useExportResourcesCo = useExportResourcesContext(),
       resourceType = _useExportResourcesCo.resourceType,
@@ -617,7 +663,7 @@ function ExportTextMessage() {
   switch (_valuesInstanceProperty__default["default"](formik).exportSelectionType) {
     case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
       return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportAllMessage), {}, {
+        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.exportAllMessage), {}, {
           values: {
             count: allResourcesCount,
             resourceType: resourceTypePlural,
@@ -628,7 +674,7 @@ function ExportTextMessage() {
 
     case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
       return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportMatchingMessage), {}, {
+        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.exportMatchingMessage), {}, {
           values: {
             count: matchingResourcesCount,
             resourceType: resourceTypePlural,
@@ -639,7 +685,7 @@ function ExportTextMessage() {
 
     case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
       return jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.exportSelectedMessage), {}, {
+        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.exportSelectedMessage), {}, {
           values: {
             count: selectedResourceIds.length,
             resourceType: resourceTypePlural,
@@ -654,8 +700,13 @@ function ExportTextMessage() {
 }
 
 function TagList(props) {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   return jsxRuntime.jsx("div", {
-    css: styles.tagListContainer,
+    css: styles.tagListContainer({
+      isNewTheme: isNewTheme
+    }),
     "data-testid": props['data-testid'],
     children: _mapInstanceProperty__default["default"](react.Children).call(react.Children, props.children, function (tag) {
       return jsxRuntime.jsx("div", {
@@ -668,12 +719,40 @@ function TagList(props) {
 TagList.displayName = 'TagList';
 TagList.propTypes = {};
 
-function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 function AppliedFilters(_ref) {
   var filters = _ref.filters,
       onFilterRemove = _ref.onFilterRemove;
+
+  var _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, function (filter) {
+        return jsxRuntime.jsx("div", {
+          "data-testid": "test-filter-".concat(filter),
+          children: jsxRuntime.jsx(uiKit.Tag, {
+            onRemove: function onRemove() {
+              onFilterRemove(filter);
+            },
+            children: filter
+          })
+        }, filter);
+      })
+    })
+  });
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
     scale: "s",
     children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
@@ -684,10 +763,10 @@ function AppliedFilters(_ref) {
         size: "medium",
         color: "neutral60"
       }), jsxRuntime.jsx(uiKit.Text.Body, {
-        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedFiltersMessage), {}, {
+        isBold: true,
+        intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedFiltersMessage), {}, {
           values: {
-            filtersCount: filters.length,
-            b: getBold
+            filtersCount: filters.length
           }
         })
       })]
@@ -708,21 +787,20 @@ function AppliedFilters(_ref) {
 }
 AppliedFilters.propTypes = {};
 
-function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+// TODO: @redesign cleanup
 function ExportBasedOnMyViewsSelectField() {
+  var _useTheme = designSystem.useTheme(),
+      themedValue = _useTheme.themedValue;
+
   return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
     scale: "m",
     alignItems: "center",
     children: [jsxRuntime.jsx(uiKit.Text.Body, {
-      intlMessage: _objectSpread$8(_objectSpread$8({}, messages.exportBasedOnMyViewsMessage), {}, {
-        values: {
-          b: getBold
-        }
-      })
+      intlMessage: messages.exportBasedOnMyViewsMessage
+    }), jsxRuntime.jsx(uiKit.Text.Body, {
+      intlMessage: messages.myViews
     }), jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
-      max: 4,
+      max: themedValue(4, 7),
       children: jsxRuntime.jsx(uiKit.SelectInput, {
         isDisabled: true,
         placeholder: "Default"
@@ -741,6 +819,24 @@ var IconPlaceholder = /*#__PURE__*/_styled__default["default"]("div", {
 
 function AppliedSearchTerms(_ref) {
   var appliedSearchTerms = _ref.appliedSearchTerms;
+
+  var _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, {
@@ -751,10 +847,10 @@ function AppliedSearchTerms(_ref) {
         size: "medium",
         color: "neutral60"
       }), jsxRuntime.jsx(uiKit.Text.Body, {
+        isBold: true,
         intlMessage: _objectSpread$7(_objectSpread$7({}, messages.appliedSearchTermsMessage), {}, {
           values: {
-            searchTermsCount: appliedSearchTerms.length,
-            b: getBold
+            searchTermsCount: appliedSearchTerms.length
           }
         })
       })]
@@ -771,9 +867,64 @@ AppliedSearchTerms.propTypes = {};
 
 function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-function Columns(_ref) {
-  var columns = _ref.columns;
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$6(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+function normalizeFields(fields) {
+  var result = _mapInstanceProperty__default["default"](fields).call(fields, function (field) {
+    if (isFilledArray(field.fields)) {
+      var _context;
+
+      return _mapInstanceProperty__default["default"](_context = normalizeFields(field.fields)).call(_context, function (nestedField) {
+        var _context2;
+
+        return _objectSpread$6(_objectSpread$6({}, nestedField), {}, {
+          key: _concatInstanceProperty__default["default"](_context2 = "".concat(field.key, ".")).call(_context2, nestedField.key)
+        });
+      });
+    }
+
+    return field;
+  });
+
+  return _flatInstanceProperty__default["default"](result).call(result);
+}
+
+function FieldsRenderer(_ref) {
+  var fields = _ref.fields;
+  var allFields = normalizeFields(fields);
+  return jsxRuntime.jsx(TagList, {
+    children: _mapInstanceProperty__default["default"](allFields).call(allFields, function (field) {
+      return 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) {
+  var fields = _ref2.fields;
+
+  var _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$6(_objectSpread$6({}, 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, {
@@ -784,28 +935,24 @@ function Columns(_ref) {
         size: "medium",
         color: "neutral60"
       }), jsxRuntime.jsx(uiKit.Text.Body, {
+        isBold: true,
         intlMessage: _objectSpread$6(_objectSpread$6({}, messages.columnsMessage), {}, {
           values: {
-            columnsCount: columns.length,
-            b: getBold
+            columnsCount: fields.length
           }
         })
       })]
-    }), jsxRuntime.jsx(TagList, {
-      children: _mapInstanceProperty__default["default"](columns).call(columns, function (column) {
-        return jsxRuntime.jsx("div", {
-          "data-testid": "test-column-".concat(column.exportLabel),
-          children: jsxRuntime.jsx(uiKit.Tag, {
-            children: column.key
-          })
-        }, column.exportLabel);
-      })
+    }), jsxRuntime.jsx(FieldsRenderer, {
+      fields: fields
     })]
   });
 }
-Columns.propTypes = {};
+ExportFields.propTypes = {};
 
 var ExportSelection = function ExportSelection() {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var _useExportResourcesCo = useExportResourcesContext(),
       formik = _useExportResourcesCo.formik;
 
@@ -817,6 +964,25 @@ var ExportSelection = function ExportSelection() {
     }));
   };
 
+  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, {})]
+    }), _valuesInstanceProperty__default["default"](formik).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, {
@@ -842,8 +1008,8 @@ var ExportSelection = function ExportSelection() {
               filters: _valuesInstanceProperty__default["default"](formik).appliedFilters,
               onFilterRemove: onAppliedFilterRemove
             })]
-          }), _valuesInstanceProperty__default["default"](formik).columns.length > 0 && jsxRuntime.jsx(Columns, {
-            columns: _valuesInstanceProperty__default["default"](formik).columns
+          }), _valuesInstanceProperty__default["default"](formik).fields.length > 0 && jsxRuntime.jsx(ExportFields, {
+            fields: _valuesInstanceProperty__default["default"](formik).fields
           })]
         })
       })]
@@ -854,8 +1020,20 @@ var ExportSelection = function ExportSelection() {
 function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var ExportPropertiesPanel = function ExportPropertiesPanel(props) {
+var ExportProperties = function ExportProperties(props) {
+  var _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,
@@ -864,7 +1042,7 @@ var ExportPropertiesPanel = function ExportPropertiesPanel(props) {
     children: props.renderProperties()
   });
 };
-ExportPropertiesPanel.propTypes = {};
+ExportProperties.propTypes = {};
 
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -912,6 +1090,9 @@ function mapLanguagesToOptions(languages) {
 }
 
 function ExportFileSettings(props) {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var intl = reactIntl.useIntl();
 
   var _useExportResourcesCo = useExportResourcesContext(),
@@ -928,6 +1109,57 @@ function ExportFileSettings(props) {
       languages = _useApplicationContex.languages,
       language = _useApplicationContex.language;
 
+  if (isNewTheme) return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "xxxl",
+    children: [jsxRuntime.jsx(applicationComponents.PageContentNarrow, {
+      children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+        scale: "xl",
+        children: [jsxRuntime.jsx(uiKit.SelectField, _objectSpread$3(_objectSpread$3({
+          isDisabled: true
+        }, formik.getFieldProps('outputFormat')), {}, {
+          title: intl.formatMessage(messages.outputFormat),
+          options: outputFormatOptions
+        })), jsxRuntime.jsx(uiKit.TextField, _objectSpread$3(_objectSpread$3({
+          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$3(_objectSpread$3({
+            id: "languages",
+            title: intl.formatMessage(messages.localLanguage),
+            options: mapLanguagesToOptions(languages),
+            isMulti: true
+          }, formik.getFieldProps('languages')), {}, {
+            onChange: function onChange(e) {
+              formik.handleChange(e);
+              formik.setFieldValue('isAllLanguagesChecked', false);
+            },
+            touched: formik.touched.languages,
+            errors: formik.errors.languages,
+            renderError: renderLanguageError
+          })), jsxRuntime.jsx(uiKit.CheckboxInput, {
+            name: "isAllLanguagesChecked",
+            isChecked: _valuesInstanceProperty__default["default"](formik).isAllLanguagesChecked,
+            onChange: function onChange(e) {
+              if (e.target.checked) formik.setFieldValue('languages', languages);else formik.setFieldValue('languages', [language]);
+              formik.handleChange(e);
+            },
+            children: intl.formatMessage(messages.all)
+          })]
+        })]
+      })
+    }), jsxRuntime.jsx(applicationComponents.PageContentWide, {
+      children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+        scale: "xxxl",
+        children: [jsxRuntime.jsx(ExportSelection, {}), jsxRuntime.jsx(ExportProperties, {
+          renderProperties: props.renderProperties
+        })]
+      })
+    })]
+  });
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
     scale: "l",
     children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
@@ -979,7 +1211,7 @@ function ExportFileSettings(props) {
         renderError: renderLanguageError,
         horizontalConstraint: 7
       }))
-    }), jsxRuntime.jsx(ExportSelection, {}), jsxRuntime.jsx(ExportPropertiesPanel, {
+    }), jsxRuntime.jsx(ExportSelection, {}), jsxRuntime.jsx(ExportProperties, {
       renderProperties: props.renderProperties
     })]
   });
@@ -1092,7 +1324,7 @@ function ExportConfirmationModal(props) {
             graphQuery = buildGraphQuery({
               resourceType: resourceType,
               selectedResourceIds: selectedResourceIds,
-              columns: _valuesInstanceProperty__default["default"](formik).columns,
+              fields: _valuesInstanceProperty__default["default"](formik).fields,
               exportSelectionType: _valuesInstanceProperty__default["default"](formik).exportSelectionType,
               languages: _valuesInstanceProperty__default["default"](formik).languages
             });