@popsure/dirty-swan 0.58.3 → 0.58.4

package/dist/cjs/index.js

@@ -8286,7 +8286,7 @@ var IMAGE_FILES = [
     'png',
     'tiff',
     'webp',
-    'svg'
+    'svg',
 ];
 
 var getUploadStatus = function (progress, error) {
@@ -8375,6 +8375,63 @@ var getStatusMessage = function (_a) {
     return message.trim();
 };
 
+var breakpointLookup = function (breakpoint) {
+    if (typeof window === 'undefined') {
+        return {
+            initialValue: false,
+            queryString: '',
+        };
+    }
+    switch (breakpoint) {
+        case 'BELOW_TABLET':
+            return {
+                initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint
+                queryString: '(max-width: 45rem)',
+            };
+        case 'BELOW_DESKTOP':
+            return {
+                initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint
+                queryString: '(max-width: 64rem)',
+            };
+        case 'ABOVE_MOBILE':
+            return {
+                initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}
+                queryString: '(min-width: 34rem)',
+            };
+        case 'ABOVE_TABLET':
+            return {
+                initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint
+                queryString: '(min-width: 45rem)',
+            };
+        case 'ABOVE_DESKTOP':
+            return {
+                initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint
+                queryString: '(min-width: 64rem)',
+            };
+        case 'BELOW_MOBILE':
+        default:
+            return {
+                initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}
+                queryString: '(max-width: 34rem)',
+            };
+    }
+};
+var useMediaQuery = function (breakpoint) {
+    var _a = breakpointLookup(breakpoint), initialValue = _a.initialValue, queryString = _a.queryString;
+    var _b = React.useState(initialValue), matchesBreakpoint = _b[0], setMatchesBreakpoint = _b[1];
+    React.useEffect(function () {
+        var mediaQuery = window.matchMedia(queryString);
+        var updateMediaQuery = function (e) {
+            return setMatchesBreakpoint(e.matches);
+        };
+        mediaQuery.addEventListener('change', updateMediaQuery);
+        return function () {
+            mediaQuery.removeEventListener('change', updateMediaQuery);
+        };
+    }, [queryString]);
+    return matchesBreakpoint;
+};
+
 var MultiDropzone = function (_a) {
     var _b;
     var uploadedFiles = _a.uploadedFiles, onFileSelect = _a.onFileSelect, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading, _c = _a.isCondensed, isCondensed = _c === void 0 ? false : _c, accept = _a.accept, _d = _a.maxFiles, maxFiles = _d === void 0 ? 0 : _d, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
@@ -8414,12 +8471,18 @@ var MultiDropzone = function (_a) {
         maxSize: maxSize,
         onDrop: onDrop,
     }), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps;
+    var isNonDesktopDevice = useMediaQuery('BELOW_TABLET');
+    var instructionsTextDesktop = (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.instructionsText) || 'Choose file or drag & drop';
+    var instructionsTextMobile = (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.instructionsTextMobile) || 'Tap to choose file';
+    var instructionsText = isNonDesktopDevice
+        ? instructionsTextMobile
+        : instructionsTextDesktop;
     return (jsxRuntime.jsxs("div", { className: styles$C.container, children: [jsxRuntime.jsxs("div", __assign({ className: classNames$1("w100 ta-center br8 c-pointer ".concat(styles$C.dropzoneContainer), (_b = {},
                     _b[styles$C['dropzoneContainerDisabled']] = uploading,
                     _b)) }, getRootProps(), { children: [jsxRuntime.jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: statusMessage }), jsxRuntime.jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps())), jsxRuntime.jsx(UploadCloudIcon, { className: isCondensed ? styles$C.img : '', size: isCondensed ? 24 : 64, color: 'purple-500' }), jsxRuntime.jsx("div", { className: "p-h4 mt8 d-block c-pointer ".concat(isCondensed ? styles$C.textInline : ''), children: uploading
                             ? (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.currentlyUploadingText) ||
                                 'Please wait while uploading file...'
-                            : (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.instructionsText) || 'Choose file or drag & drop' }), jsxRuntime.jsx("div", { className: "p-p--small tc-grey-500", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsText) || placeholder })] })), errors.map(function (_a) {
+                            : instructionsText }), jsxRuntime.jsx("div", { className: "p-p--small tc-grey-500", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsText) || placeholder })] })), errors.map(function (_a) {
                 var id = _a.id, message = _a.message;
                 return message && (jsxRuntime.jsx(UploadFileCell, { uploadStatus: "ERROR", file: {
                         error: message,
@@ -16291,63 +16354,6 @@ var css_248z$4 = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.T
 var styles$4 = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","stickyHeader":"Table-module_stickyHeader__2uEpP","modalContent":"Table-module_modalContent__1PNgv"};
 styleInject(css_248z$4);
 
-var breakpointLookup = function (breakpoint) {
-    if (typeof window === 'undefined') {
-        return {
-            initialValue: false,
-            queryString: '',
-        };
-    }
-    switch (breakpoint) {
-        case 'BELOW_TABLET':
-            return {
-                initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint
-                queryString: '(max-width: 45rem)',
-            };
-        case 'BELOW_DESKTOP':
-            return {
-                initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint
-                queryString: '(max-width: 64rem)',
-            };
-        case 'ABOVE_MOBILE':
-            return {
-                initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}
-                queryString: '(min-width: 34rem)',
-            };
-        case 'ABOVE_TABLET':
-            return {
-                initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint
-                queryString: '(min-width: 45rem)',
-            };
-        case 'ABOVE_DESKTOP':
-            return {
-                initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint
-                queryString: '(min-width: 64rem)',
-            };
-        case 'BELOW_MOBILE':
-        default:
-            return {
-                initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}
-                queryString: '(max-width: 34rem)',
-            };
-    }
-};
-var useMediaQuery = function (breakpoint) {
-    var _a = breakpointLookup(breakpoint), initialValue = _a.initialValue, queryString = _a.queryString;
-    var _b = React.useState(initialValue), matchesBreakpoint = _b[0], setMatchesBreakpoint = _b[1];
-    React.useEffect(function () {
-        var mediaQuery = window.matchMedia(queryString);
-        var updateMediaQuery = function (e) {
-            return setMatchesBreakpoint(e.matches);
-        };
-        mediaQuery.addEventListener('change', updateMediaQuery);
-        return function () {
-            mediaQuery.removeEventListener('change', updateMediaQuery);
-        };
-    }, [queryString]);
-    return matchesBreakpoint;
-};
-
 var css_248z$3 = ".TableSection-module_table__sNbDq {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n@media (min-width: 34rem) {\n  .TableSection-module_table__sNbDq {\n    min-width: 845px;\n  }\n}\n\n.TableSection-module_tr__UbkbE {\n  min-height: 72px;\n}";
 var styles$3 = {"table":"TableSection-module_table__sNbDq","tr":"TableSection-module_tr__UbkbE"};
 styleInject(css_248z$3);