@commercetools-frontend-extensions/export-resources-modal 4.13.0 → 5.0.0

package/dist/declarations/src/@constants/feature-toggles.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_SHORT_LIVED_FLAGS: {};
+export declare const DEFAULT_LONG_LIVED_FLAGS: {};
+export declare const ALL_DEFAULT_FEATURE_FLAGS: {};

package/dist/declarations/src/@constants/field-selection-modes.d.ts

@@ -0,0 +1,4 @@
+export declare const FIELD_SELECTION_MODES: {
+    readonly SELECTED_FIELDS: "selected-fields";
+    readonly IMPORTED_CSV_TEMPLATE: "imported-csv-template";
+};

package/dist/declarations/src/@constants/index.d.ts

@@ -6,3 +6,5 @@ export * from "./exportable-resources.js";
 export * from "./output-formats.js";
 export * from "./urls.js";
 export * from "./resource-type-messages.js";
+export * from "./field-selection-modes.js";
+export * from "./feature-toggles.js";

package/dist/declarations/src/@constants/misc.d.ts

@@ -1,3 +1,4 @@
 export declare const Z_INDEX_DROPDOWN = 30000;
 export declare const OPERATIONS_EXPORT_RESOURCES_MODAL_SELECTION = "OPERATIONS_EXPORT_RESOURCES_MODAL_SELECTION";
 export declare const OPERATIONS_EXPORT_RESOURCES_MODAL_EXPANDED_GROUP = "OPERATIONS_EXPORT_RESOURCES_MODAL_EXPANDED_GROUP";
+export declare const TOTAL_STEPS = 3;

package/dist/declarations/src/@constants/urls.d.ts

@@ -1,2 +1,2 @@
-import { ResourceTypeMap } from "../@types/resource-type.js";
-export declare const FIELD_DEFINITIONS_URLS: ResourceTypeMap;
+export declare const EXPORT_DATA_DOCUMENTATION_LINK = "https://docs.commercetools.com/merchant-center/export-data";
+export declare const CSV_TEMPLATES_LINK = "https://docs.commercetools.com/merchant-center/import-data#download-a-csv-template";

package/dist/declarations/src/@hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from "./use-export-resources-modal-context.js";
 export * from "./use-initial-values.js";
 export * from "./use-start-export-operation.js";
 export * from "./use-convert-field-definitions-for-export.js";
+export * from "./use-validate-imported-headers.js";

package/dist/declarations/src/@hooks/use-start-export-operation.d.ts

@@ -1,4 +1,4 @@
-import type { ExportResourcesModalProps, ExportType, FormValues } from "../@types/index.js";
+import type { ExportResourcesModalProps, ExportType, FieldSelectionMode, FormValues, LocaleOption } from "../@types/index.js";
 export declare const useStartExportOperation: (props: ExportResourcesModalProps) => {
-    startExportOperation: (values: FormValues, exportType: ExportType) => Promise<void>;
+    startExportOperation: (values: FormValues, exportType: ExportType, fieldSelectionMode: FieldSelectionMode, localeOption: LocaleOption, importedHeaders: string[]) => Promise<void>;
 };

package/dist/declarations/src/@hooks/use-validate-imported-headers.d.ts

@@ -0,0 +1,15 @@
+export declare const useValidateImportedHeaders: () => {
+    validateHeaders: (params: {
+        fileName: string;
+        outputFormat: string;
+        resourceType: string;
+        fields: string[];
+        locales?: string[];
+    }) => Promise<{
+        success: boolean;
+        validationErrors: {
+            code: string;
+            field: string;
+        }[];
+    } | undefined>;
+};

package/dist/declarations/src/@types/drop-area-state.d.ts

@@ -0,0 +1 @@
+export type DropAreaState = 'default' | 'active-drag' | 'file-dropped';

package/dist/declarations/src/@types/export-api.d.ts

@@ -1,11 +1,12 @@
 import type { QueryFilter, SearchFilter } from "./export-resources-modal-types.js";
+import type { FieldValidationError } from "./field-validation-error.js";
 export interface ExportApiRequest {
     projectKey: string;
     resourceType: string;
     fileName: string;
     fileFormat: string;
     fields: string[];
-    locales: string[];
+    locales: string[] | undefined;
     filters?: QueryFilter | SearchFilter;
     where?: string;
     fillRows?: boolean;
@@ -14,7 +15,7 @@ export interface ExportApiRequest {
         locale: string;
     };
 }
-export interface ExportApiResponse {
+export interface ExportApiSuccessResponse {
     id: string;
     state: string;
     resourceType: string;
@@ -28,3 +29,9 @@ export interface ExportApiResponse {
     resourceCount: number;
     createdAt: string;
 }
+export interface ExportApiErrorResponse {
+    error: string;
+    message: string;
+    statusCode: number;
+    validationErrors: FieldValidationError[];
+}

package/dist/declarations/src/@types/export-resources-modal-context.d.ts

@@ -1,11 +1,16 @@
 /// <reference types="react" />
 import type { FormikProps } from 'formik';
 import type { ExportType, Filters } from "./export-resources-modal-types.js";
+import type { FieldSelectionMode } from "./field-selection-mode.js";
+import type { FieldValidationError } from "./field-validation-error.js";
 import type { FormValues } from "./form.js";
+import { LocaleOption } from "./locale-option.js";
 import type { ResourceType } from "./resource-type.js";
 export declare enum Step {
     FileSettings = "file-settings",
-    FieldsSelection = "fields-selection"
+    FieldsSelection = "fields-selection",
+    ConfirmExport = "confirm-export",
+    ValidationErrors = "validation-errors"
 }
 export interface ExportResourcesModalContext {
     formik: FormikProps<FormValues>;
@@ -20,4 +25,11 @@ export interface ExportResourcesModalContext {
     hasFilters: boolean;
     setExportType: React.Dispatch<React.SetStateAction<ExportType>>;
     hideExportSelectedResourcesOption?: boolean;
+    fieldSelectionMode: FieldSelectionMode;
+    setFieldSelectionMode: React.Dispatch<React.SetStateAction<FieldSelectionMode>>;
+    localeOption: LocaleOption;
+    setLocaleOption: React.Dispatch<React.SetStateAction<LocaleOption>>;
+    importedHeaders: string[];
+    setImportedHeaders: React.Dispatch<React.SetStateAction<string[]>>;
+    validationErrors: FieldValidationError[];
 }

package/dist/declarations/src/@types/export-resources-modal-types.d.ts

@@ -16,6 +16,7 @@ export interface Field {
 export interface FieldGroup {
     groupLabel: string;
     groupName: string;
+    previewGroupLabel: string;
     isExpanded?: boolean;
     fields: Field[];
 }

package/dist/declarations/src/@types/field-selection-mode.d.ts

@@ -0,0 +1,2 @@
+import { FIELD_SELECTION_MODES } from "../@constants/index.js";
+export type FieldSelectionMode = (typeof FIELD_SELECTION_MODES)[keyof typeof FIELD_SELECTION_MODES];

package/dist/declarations/src/@types/field-validation-error-code.d.ts

@@ -0,0 +1 @@
+export type FieldValidationErrorCode = 'DuplicateFields' | 'NotSupportedField' | 'FieldDefinitionNotFound' | 'AttributeDefinitionNotFound' | 'LocalizedFieldWithoutLocale' | 'IncompleteField';

package/dist/declarations/src/@types/field-validation-error.d.ts

@@ -0,0 +1,6 @@
+import type { FieldValidationErrorCode } from "./field-validation-error-code.js";
+export type FieldValidationError = {
+    code: FieldValidationErrorCode;
+    message: string;
+    field: string;
+};

package/dist/declarations/src/@types/form.d.ts

@@ -16,6 +16,7 @@ export interface FormValues {
     groups: FormGroup[];
     locales: string[];
     fillRows?: boolean;
+    importedCsvTemplateFile: File | null;
 }
 export type FormFieldError = Record<string, boolean>;
 export interface FormValidationErrors {
@@ -29,4 +30,7 @@ export interface FormValidationErrors {
     fields: {
         missing?: boolean;
     };
+    importedCsvTemplateFile: {
+        missing?: boolean;
+    };
 }

package/dist/declarations/src/@types/grouped-validation-error.d.ts

@@ -0,0 +1,8 @@
+import type { FieldValidationError } from "./field-validation-error.js";
+import type { FieldValidationErrorCode } from "./field-validation-error-code.js";
+export interface GroupedValidationError {
+    code: FieldValidationErrorCode;
+    messageTitle: string;
+    fieldNames: string[];
+    originalErrors: FieldValidationError[];
+}

package/dist/declarations/src/@types/index.d.ts

@@ -5,3 +5,9 @@ export * from "./resource-type.js";
 export * from "./output-format.js";
 export * from "./export-api.js";
 export * from "./field-definition.js";
+export * from "./field-selection-mode.js";
+export * from "./drop-area-state.js";
+export * from "./locale-option.js";
+export * from "./field-validation-error-code.js";
+export * from "./field-validation-error.js";
+export * from "./grouped-validation-error.js";

package/dist/declarations/src/@types/locale-option.d.ts

@@ -0,0 +1,5 @@
+export declare enum LocaleOption {
+    Selected = "selected",
+    All = "all",
+    OnlyLocalesFoundInCsvFile = "onlyLocalesFoundInCsvFile"
+}

package/dist/{en-56c15954.cjs.prod.js → en-0a01cd09.cjs.prod.js}

@@ -155,7 +155,7 @@ var en = {
 	},
 	"ExportResourcesModal.loadMoreFields": {
 		developer_comment: "Load more fields message",
-		string: "Load more fields by using the search functionality"
+		string: "Load more fields by using the search functionality or specify the full list of fields with a CSV file"
 	},
 	"ExportResourcesModal.locale": {
 		developer_comment: "Locale",

package/dist/{en-9aa667ca.cjs.dev.js → en-2af10351.cjs.dev.js}

@@ -155,7 +155,7 @@ var en = {
 	},
 	"ExportResourcesModal.loadMoreFields": {
 		developer_comment: "Load more fields message",
-		string: "Load more fields by using the search functionality"
+		string: "Load more fields by using the search functionality or specify the full list of fields with a CSV file"
 	},
 	"ExportResourcesModal.locale": {
 		developer_comment: "Locale",

package/dist/{en-5b88bfde.esm.js → en-e31f86e7.esm.js}

@@ -153,7 +153,7 @@ var en = {
 	},
 	"ExportResourcesModal.loadMoreFields": {
 		developer_comment: "Load more fields message",
-		string: "Load more fields by using the search functionality"
+		string: "Load more fields by using the search functionality or specify the full list of fields with a CSV file"
 	},
 	"ExportResourcesModal.locale": {
 		developer_comment: "Locale",

package/dist/enabled-drop-area-9ca41e63.esm.js

@@ -0,0 +1,120 @@
+import { Spacings, Text, Link } from '@commercetools-frontend/ui-kit';
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { m as messages } from './index-b645c74b.esm.js';
+import '@babel/runtime-corejs3/helpers/objectWithoutProperties';
+import '@babel/runtime-corejs3/helpers/slicedToArray';
+import '@babel/runtime-corejs3/core-js-stable/object/entries';
+import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
+import '@babel/runtime-corejs3/core-js-stable/instance/ends-with';
+import '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import 'react-intl';
+import '@commercetools-frontend/application-shell-connectors';
+import '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import '@babel/runtime-corejs3/core-js-stable/instance/values';
+import '@commercetools-frontend/application-components';
+import '@commercetools-frontend/fullstory';
+import '@babel/runtime-corejs3/core-js-stable/reflect/construct';
+import '@babel/runtime-corejs3/helpers/createClass';
+import '@babel/runtime-corejs3/helpers/classCallCheck';
+import '@babel/runtime-corejs3/helpers/possibleConstructorReturn';
+import '@babel/runtime-corejs3/helpers/getPrototypeOf';
+import '@babel/runtime-corejs3/helpers/inherits';
+import '@babel/runtime-corejs3/helpers/wrapNativeSuper';
+import '@babel/runtime-corejs3/core-js-stable/instance/reduce';
+import '@commercetools-frontend/experimental-components';
+import '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import 'omit-empty-es';
+import '@babel/runtime-corejs3/core-js-stable/instance/some';
+import '@babel/runtime-corejs3/core-js-stable/instance/find';
+import '@babel/runtime-corejs3/core-js-stable/instance/every';
+import '@babel/runtime-corejs3/core-js-stable/instance/map';
+import '@babel/runtime-corejs3/core-js-stable/array/is-array';
+import '@babel/runtime-corejs3/core-js-stable/set';
+import '@babel/runtime-corejs3/core-js-stable/instance/sort';
+import '@babel/runtime-corejs3/core-js-stable/instance/index-of';
+import '@babel/runtime-corejs3/core-js-stable/instance/trim';
+import '@babel/runtime-corejs3/core-js-stable/promise';
+import '@babel/runtime-corejs3/core-js-stable/instance/slice';
+import '@babel/runtime-corejs3/core-js-stable/object/values';
+import '@commercetools-frontend/actions-global';
+import '@commercetools-frontend/constants';
+import '@commercetools-frontend/sdk';
+import '@commercetools-frontend/l10n';
+import 'lodash/sortBy';
+import '@emotion/styled/base';
+import 'lodash/debounce';
+import '@emotion/react';
+import 'lodash/get';
+import 'formik';
+import '@commercetools-uikit/icons';
+import 'react-dropzone';
+import '@commercetools-frontend/i18n';
+import '@commercetools-frontend/sentry';
+
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+const FileIcon = props => jsxs("svg", _objectSpread(_objectSpread({
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), {}, {
+  children: [jsx("mask", {
+    id: "mask0_17_6643",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "32",
+    height: "32",
+    children: jsx("rect", {
+      width: "32",
+      height: "32",
+      fill: "#D9D9D9"
+    })
+  }), jsx("g", {
+    mask: "url(#mask0_17_6643)",
+    children: jsx("path", {
+      d: "M14.6667 25.3333H17.3333V19.7667L19.4667 21.9L21.3333 20L16 14.6667L10.6667 20L12.5667 21.8667L14.6667 19.7667V25.3333ZM8 29.3333C7.26667 29.3333 6.63889 29.0722 6.11667 28.55C5.59444 28.0278 5.33333 27.4 5.33333 26.6667V5.33332C5.33333 4.59999 5.59444 3.97221 6.11667 3.44999C6.63889 2.92777 7.26667 2.66666 8 2.66666H18.6667L26.6667 10.6667V26.6667C26.6667 27.4 26.4056 28.0278 25.8833 28.55C25.3611 29.0722 24.7333 29.3333 24 29.3333H8ZM17.3333 12H24L17.3333 5.33332V12Z",
+      fill: "#B1ACFF"
+    })
+  })]
+}));
+
+function EnabledDropArea() {
+  return jsxs(Spacings.Inline, {
+    alignItems: "center",
+    justifyContent: "center",
+    scale: "s",
+    children: [jsx(FileIcon, {}), jsxs(Spacings.Inline, {
+      alignItems: "center",
+      scale: "s",
+      children: [jsx(Text.Subheadline, {
+        as: "h4",
+        intlMessage: messages.dragAndDropCSV
+      }), jsx(Text.Body, {
+        intlMessage: messages.or
+      }), jsx(Link, {
+        intlMessage: messages.browseFile,
+        tone: "secondary",
+        to: "",
+        onClick: ev => ev.preventDefault()
+      })]
+    })]
+  });
+}
+
+export { EnabledDropArea as default };

package/dist/enabled-drop-area-a25dfe55.cjs.dev.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var uiKit = require('@commercetools-frontend/ui-kit');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+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');
+require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var dist_commercetoolsFrontendExtensionsExportResourcesModal = require('./index-1a99ddcf.cjs.dev.js');
+require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('@babel/runtime-corejs3/core-js-stable/instance/ends-with');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('react-intl');
+require('@commercetools-frontend/application-shell-connectors');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@babel/runtime-corejs3/core-js-stable/instance/values');
+require('@commercetools-frontend/application-components');
+require('@commercetools-frontend/fullstory');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@commercetools-frontend/experimental-components');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('omit-empty-es');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@babel/runtime-corejs3/core-js-stable/instance/every');
+require('@babel/runtime-corejs3/core-js-stable/instance/map');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/set');
+require('@babel/runtime-corejs3/core-js-stable/instance/sort');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+require('@babel/runtime-corejs3/core-js-stable/promise');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+require('@commercetools-frontend/actions-global');
+require('@commercetools-frontend/constants');
+require('@commercetools-frontend/sdk');
+require('@commercetools-frontend/l10n');
+require('lodash/sortBy');
+require('@emotion/styled/base');
+require('lodash/debounce');
+require('@emotion/react');
+require('lodash/get');
+require('formik');
+require('@commercetools-uikit/icons');
+require('react-dropzone');
+require('@commercetools-frontend/i18n');
+require('@commercetools-frontend/sentry');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+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 FileIcon = props => jsxRuntime.jsxs("svg", _objectSpread(_objectSpread({
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), {}, {
+  children: [jsxRuntime.jsx("mask", {
+    id: "mask0_17_6643",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "32",
+    height: "32",
+    children: jsxRuntime.jsx("rect", {
+      width: "32",
+      height: "32",
+      fill: "#D9D9D9"
+    })
+  }), jsxRuntime.jsx("g", {
+    mask: "url(#mask0_17_6643)",
+    children: jsxRuntime.jsx("path", {
+      d: "M14.6667 25.3333H17.3333V19.7667L19.4667 21.9L21.3333 20L16 14.6667L10.6667 20L12.5667 21.8667L14.6667 19.7667V25.3333ZM8 29.3333C7.26667 29.3333 6.63889 29.0722 6.11667 28.55C5.59444 28.0278 5.33333 27.4 5.33333 26.6667V5.33332C5.33333 4.59999 5.59444 3.97221 6.11667 3.44999C6.63889 2.92777 7.26667 2.66666 8 2.66666H18.6667L26.6667 10.6667V26.6667C26.6667 27.4 26.4056 28.0278 25.8833 28.55C25.3611 29.0722 24.7333 29.3333 24 29.3333H8ZM17.3333 12H24L17.3333 5.33332V12Z",
+      fill: "#B1ACFF"
+    })
+  })]
+}));
+
+function EnabledDropArea() {
+  return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+    alignItems: "center",
+    justifyContent: "center",
+    scale: "s",
+    children: [jsxRuntime.jsx(FileIcon, {}), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+      alignItems: "center",
+      scale: "s",
+      children: [jsxRuntime.jsx(uiKit.Text.Subheadline, {
+        as: "h4",
+        intlMessage: dist_commercetoolsFrontendExtensionsExportResourcesModal.messages.dragAndDropCSV
+      }), jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: dist_commercetoolsFrontendExtensionsExportResourcesModal.messages.or
+      }), jsxRuntime.jsx(uiKit.Link, {
+        intlMessage: dist_commercetoolsFrontendExtensionsExportResourcesModal.messages.browseFile,
+        tone: "secondary",
+        to: "",
+        onClick: ev => ev.preventDefault()
+      })]
+    })]
+  });
+}
+
+exports["default"] = EnabledDropArea;

package/dist/enabled-drop-area-ed00d1fd.cjs.prod.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var uiKit = require('@commercetools-frontend/ui-kit');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+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');
+require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var dist_commercetoolsFrontendExtensionsExportResourcesModal = require('./index-e05daeff.cjs.prod.js');
+require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('@babel/runtime-corejs3/core-js-stable/instance/ends-with');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('react-intl');
+require('@commercetools-frontend/application-shell-connectors');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@babel/runtime-corejs3/core-js-stable/instance/values');
+require('@commercetools-frontend/application-components');
+require('@commercetools-frontend/fullstory');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@commercetools-frontend/experimental-components');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('omit-empty-es');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@babel/runtime-corejs3/core-js-stable/instance/every');
+require('@babel/runtime-corejs3/core-js-stable/instance/map');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/set');
+require('@babel/runtime-corejs3/core-js-stable/instance/sort');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+require('@babel/runtime-corejs3/core-js-stable/promise');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+require('@commercetools-frontend/actions-global');
+require('@commercetools-frontend/constants');
+require('@commercetools-frontend/sdk');
+require('@commercetools-frontend/l10n');
+require('lodash/sortBy');
+require('@emotion/styled/base');
+require('lodash/debounce');
+require('@emotion/react');
+require('lodash/get');
+require('formik');
+require('@commercetools-uikit/icons');
+require('react-dropzone');
+require('@commercetools-frontend/i18n');
+require('@commercetools-frontend/sentry');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+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 FileIcon = props => jsxRuntime.jsxs("svg", _objectSpread(_objectSpread({
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), {}, {
+  children: [jsxRuntime.jsx("mask", {
+    id: "mask0_17_6643",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "32",
+    height: "32",
+    children: jsxRuntime.jsx("rect", {
+      width: "32",
+      height: "32",
+      fill: "#D9D9D9"
+    })
+  }), jsxRuntime.jsx("g", {
+    mask: "url(#mask0_17_6643)",
+    children: jsxRuntime.jsx("path", {
+      d: "M14.6667 25.3333H17.3333V19.7667L19.4667 21.9L21.3333 20L16 14.6667L10.6667 20L12.5667 21.8667L14.6667 19.7667V25.3333ZM8 29.3333C7.26667 29.3333 6.63889 29.0722 6.11667 28.55C5.59444 28.0278 5.33333 27.4 5.33333 26.6667V5.33332C5.33333 4.59999 5.59444 3.97221 6.11667 3.44999C6.63889 2.92777 7.26667 2.66666 8 2.66666H18.6667L26.6667 10.6667V26.6667C26.6667 27.4 26.4056 28.0278 25.8833 28.55C25.3611 29.0722 24.7333 29.3333 24 29.3333H8ZM17.3333 12H24L17.3333 5.33332V12Z",
+      fill: "#B1ACFF"
+    })
+  })]
+}));
+
+function EnabledDropArea() {
+  return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+    alignItems: "center",
+    justifyContent: "center",
+    scale: "s",
+    children: [jsxRuntime.jsx(FileIcon, {}), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+      alignItems: "center",
+      scale: "s",
+      children: [jsxRuntime.jsx(uiKit.Text.Subheadline, {
+        as: "h4",
+        intlMessage: dist_commercetoolsFrontendExtensionsExportResourcesModal.messages.dragAndDropCSV
+      }), jsxRuntime.jsx(uiKit.Text.Body, {
+        intlMessage: dist_commercetoolsFrontendExtensionsExportResourcesModal.messages.or
+      }), jsxRuntime.jsx(uiKit.Link, {
+        intlMessage: dist_commercetoolsFrontendExtensionsExportResourcesModal.messages.browseFile,
+        tone: "secondary",
+        to: "",
+        onClick: ev => ev.preventDefault()
+      })]
+    })]
+  });
+}
+
+exports["default"] = EnabledDropArea;