@commercetools-frontend-extensions/export-resources-modal 1.1.0 → 1.2.1

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

@@ -36,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');
@@ -356,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',
@@ -428,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'
   }
 });
 
@@ -539,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 = {
@@ -556,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(),
@@ -582,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
+            }
           })
         })
       })]
@@ -620,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,
@@ -638,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,
@@ -649,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,
@@ -660,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,
@@ -675,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", {
@@ -689,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, {
@@ -705,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
           }
         })
       })]
@@ -729,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"
@@ -762,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, {
@@ -772,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
           }
         })
       })]
@@ -832,6 +907,24 @@ function FieldsRenderer(_ref) {
 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, {
@@ -842,10 +935,10 @@ function ExportFields(_ref2) {
         size: "medium",
         color: "neutral60"
       }), jsxRuntime.jsx(uiKit.Text.Body, {
+        isBold: true,
         intlMessage: _objectSpread$6(_objectSpread$6({}, messages.columnsMessage), {}, {
           values: {
-            columnsCount: fields.length,
-            b: getBold
+            columnsCount: fields.length
           }
         })
       })]
@@ -857,6 +950,9 @@ function ExportFields(_ref2) {
 ExportFields.propTypes = {};
 
 var ExportSelection = function ExportSelection() {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var _useExportResourcesCo = useExportResourcesContext(),
       formik = _useExportResourcesCo.formik;
 
@@ -868,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, {
@@ -905,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,
@@ -915,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; }
 
@@ -963,6 +1090,9 @@ function mapLanguagesToOptions(languages) {
 }
 
 function ExportFileSettings(props) {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var intl = reactIntl.useIntl();
 
   var _useExportResourcesCo = useExportResourcesContext(),
@@ -979,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, {
@@ -1030,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
     })]
   });