@popsure/dirty-swan 0.58.2 → 0.58.4

package/dist/cjs/index.js

@@ -303,7 +303,7 @@ function generateId() {
     return 'xxxx-xxxx-xxx-xxxx'.replace(/[x]/g, function () { return (Math.floor(Math.random() * 16).toString(16)); });
 }
 
-var css_248z$I = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-500);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-grey-600);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-grey-600);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
+var css_248z$I = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-500);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-grey-600);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-grey-600);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
 var styles$H = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
 styleInject(css_248z$I);
 
@@ -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);