@popsure/dirty-swan 0.57.8 → 0.58.0

package/dist/cjs/index.js

@@ -319,7 +319,7 @@ var Input = React__default['default'].forwardRef(function (_a, ref) {
                             : styles$H['input--no-placeholder'], (_c = {},
                             _c[styles$H['input--with-prefix']] = prefix,
                             _c[styles$H['input--with-inside-label']] = labelInsideInput,
-                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled }, props)), prefix && (jsxRuntime.jsx("span", { className: classNames$1(styles$H.prefix, (_d = {}, _d[styles$H['prefix--with-error']] = error, _d), (_e = {}, _e[styles$H['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsxRuntime.jsx("label", { htmlFor: uniqueId, className: classNames$1(styles$H.placeholder, (_f = {}, _f[styles$H['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles$H['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsxRuntime.jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles$H.error), children: error }))] }));
+                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? error : undefined }, props)), prefix && (jsxRuntime.jsx("span", { className: classNames$1(styles$H.prefix, (_d = {}, _d[styles$H['prefix--with-error']] = error, _d), (_e = {}, _e[styles$H['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsxRuntime.jsx("label", { htmlFor: uniqueId, className: classNames$1(styles$H.placeholder, (_f = {}, _f[styles$H['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles$H['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsxRuntime.jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles$H.error), children: error }))] }));
 });
 
 var build = {};
@@ -8212,18 +8212,18 @@ const AnimateHeight = (_a) => {
         React__default['default'].createElement("div", { className: contentClassName, style: contentStyle, ref: contentElement }, children)));
 };
 
-var css_248z$D = ".style-module_container__Uyltc {\n  background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n  border: 1px dashed var(--ds-primary-500);\n  padding: 32px 0;\n  background-color: white;\n  transition: all 0.6s ease-in-out;\n}\n\n.style-module_img__11JI8 {\n  vertical-align: middle;\n  margin-right: 8px;\n  height: 18px;\n}\n\n.style-module_textInline__2F21z {\n  display: inline-flex;\n}\n\n.style-module_dropzoneContainer__yZoGP:focus {\n  outline: none;\n}\n\n.style-module_dropzoneContainer__yZoGP:hover {\n  background-color: var(--ds-primary-100);\n  transition: 0.5s ease;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n  pointer-events: none;\n  opacity: 0.4;\n}";
+var css_248z$D = ".style-module_container__Uyltc {\n  background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n  border: 1px dashed var(--ds-primary-500);\n  padding: 32px 0;\n  background-color: white;\n  transition: all 0.6s ease-in-out;\n}\n.style-module_dropzoneContainer__yZoGP:focus-visible {\n  outline: 2px solid #26262e;\n  border-radius: 2px;\n  outline-offset: 2px;\n}\n.style-module_dropzoneContainer__yZoGP:hover {\n  background-color: var(--ds-primary-100);\n  transition: 0.5s ease;\n}\n\n.style-module_img__11JI8 {\n  vertical-align: middle;\n  margin-right: 8px;\n  height: 18px;\n}\n\n.style-module_textInline__2F21z {\n  display: inline-flex;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n  pointer-events: none;\n  opacity: 0.4;\n}";
 var styles$C = {"container":"style-module_container__Uyltc","dropzoneContainer":"style-module_dropzoneContainer__yZoGP","img":"style-module_img__11JI8","textInline":"style-module_textInline__2F21z","dropzoneContainerDisabled":"style-module_dropzoneContainerDisabled__1X3gP"};
 styleInject(css_248z$D);
 
-var css_248z$C = ".style-module_upload-file-cell__3nv5i {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 64px;\n  padding: 8px 16px;\n  border: 1px solid #d2d2d8;\n  border-radius: 8px;\n  background-color: white;\n  animation: style-module_appear-down__14rCV 0.6s;\n  animation-fill-mode: both;\n  animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n  border-color: #e55454;\n  background-color: rgba(229, 84, 84, 0.2);\n}\n\n.style-module_cell-left-section__3Iv8c {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_icon__31Yuk {\n  margin: 0px;\n}\n\n.style-module_main-icon__335_Y {\n  margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.style-module_progress-bar-container__2JCBO {\n  position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n  background-color: #f5f6fb;\n  border-radius: 10px;\n  height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n  background-color: #8e8cee;\n  border-radius: 10px;\n  height: 4px;\n  position: absolute;\n  bottom: 0;\n  transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n  display: flex;\n  justify-content: flex-end;\n  min-width: 32px;\n  margin-left: 16px;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n  min-width: 64px;\n}\n\n.style-module_view-icon__3UenG,\n.style-module_remove-icon__2FWBQ {\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.style-module_remove-icon__2FWBQ {\n  margin-left: 16px;\n}\n\n.style-module_disabled__s-DR1 {\n  pointer-events: none;\n  cursor: default;\n  opacity: 0.3;\n}\n\n@keyframes style-module_appear-down__14rCV {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
-var styles$B = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","appear-down":"style-module_appear-down__14rCV","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","icon":"style-module_icon__31Yuk","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","view-icon":"style-module_view-icon__3UenG","remove-icon":"style-module_remove-icon__2FWBQ","disabled":"style-module_disabled__s-DR1"};
+var css_248z$C = ".style-module_upload-file-cell__3nv5i {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 64px;\n  padding: 8px 16px;\n  border: 1px solid #d2d2d8;\n  border-radius: 8px;\n  background-color: white;\n  animation: style-module_appear-down__14rCV 0.6s;\n  animation-fill-mode: both;\n  animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n  border-color: #e55454;\n  background-color: rgba(229, 84, 84, 0.2);\n}\n\n.style-module_cell-left-section__3Iv8c {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_main-icon__335_Y {\n  margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.style-module_progress-bar-container__2JCBO {\n  position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n  background-color: #f5f6fb;\n  border-radius: 10px;\n  height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n  background-color: #8e8cee;\n  border-radius: 10px;\n  height: 4px;\n  position: absolute;\n  bottom: 0;\n  transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n  display: flex;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n  min-width: 64px;\n}\n\n.style-module_button__xo5tR {\n  width: 32px;\n}\n.style-module_button__xo5tR div span span {\n  min-width: 24px !important;\n  height: 24px !important;\n}\n.style-module_button__xo5tR:focus-visible {\n  outline: 2px solid #26262e;\n  border-radius: 2px;\n  outline-offset: 2px;\n}\n\n@keyframes style-module_appear-down__14rCV {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
+var styles$B = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","appear-down":"style-module_appear-down__14rCV","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","button":"style-module_button__xo5tR"};
 styleInject(css_248z$C);
 
 var UploadFileCell = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var uploadStatus = _a.uploadStatus, file = _a.file, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading;
-    var id = file.id, error = file.error, name = file.name, progress = file.progress, previewUrl = file.previewUrl, _e = file.showLoadingSpinner, showLoadingSpinner = _e === void 0 ? false : _e, _f = file.showProgressBar, showProgressBar = _f === void 0 ? true : _f;
+    var id = file.id, error = file.error, name = file.name, progress = file.progress, previewUrl = file.previewUrl, _d = file.showLoadingSpinner, showLoadingSpinner = _d === void 0 ? false : _d, _e = file.showProgressBar, showProgressBar = _e === void 0 ? true : _e;
     var isComplete = uploadStatus === 'COMPLETE';
     var isUploading = uploadStatus === 'UPLOADING';
     var hasError = uploadStatus === 'ERROR';
@@ -8241,9 +8241,7 @@ var UploadFileCell = function (_a) {
             _b[styles$B['upload-file-cell-error']] = hasError,
             _b)), children: [jsxRuntime.jsxs("div", { className: "w100 ".concat(styles$B['cell-left-section']), children: [jsxRuntime.jsx(FileIcon, { className: classNames$1("".concat(styles$B['main-icon'], " ").concat(styles$B.icon)), color: mapFileIconColor[uploadStatus], size: 24 }), jsxRuntime.jsxs("div", { className: "w100", children: [jsxRuntime.jsx("div", { className: "p-p ".concat(styles$B['upload-display-text']), title: displayText, children: displayText }), isUploading && showProgressBar && (jsxRuntime.jsxs("div", { className: "mt8 w100 ".concat(styles$B['progress-bar-container']), children: [jsxRuntime.jsx("div", { className: "".concat(styles$B['progress-bar']) }), jsxRuntime.jsx("div", { "data-testid": "ds-filecell-progressbar", className: "".concat(styles$B['progress-bar-filler']), style: { width: "".concat(progress, "%") } })] }))] })] }), jsxRuntime.jsx("div", { className: classNames$1(styles$B['cell-right-section'], (_c = {},
                     _c[styles$B['cell-right-section-complete']] = isComplete,
-                    _c)), children: isUploading ? (jsxRuntime.jsx("div", { className: styles$B.spinner, children: showLoadingSpinner && (jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m", "data-testid": "ds-filecell-spinner" })) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isComplete && (jsxRuntime.jsx("a", { className: styles$B['view-icon'], href: previewUrl, target: "_blank", rel: "noopener noreferrer", children: jsxRuntime.jsx(EyeVisionIcon, { color: 'grey-500', size: 24, className: styles$B.icon }) })), onRemoveFile && (jsxRuntime.jsx("button", { type: "button", onClick: function () { return onRemoveFile(id); }, className: classNames$1(styles$B['remove-icon'], (_d = {},
-                                _d[styles$B.disabled] = uploading,
-                                _d)), "data-testid": "remove-button", children: jsxRuntime.jsx(Trash2Icon, { color: hasError ? 'red-500' : 'grey-500', size: 24, className: styles$B.icon }) }))] })) })] }));
+                    _c)), children: isUploading ? (jsxRuntime.jsx("div", { className: styles$B.spinner, children: showLoadingSpinner && (jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m", "data-testid": "ds-filecell-spinner" })) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isComplete && (jsxRuntime.jsx(Button, { as: "a", href: previewUrl, target: "_blank", rel: "noopener noreferrer", hideLabel: true, variant: "filledWhite", className: classNames$1('mr16', styles$B.button), leftIcon: jsxRuntime.jsx(EyeVisionIcon, { noMargin: true, color: 'grey-500', size: 24 }), children: "Preview file" })), onRemoveFile && (jsxRuntime.jsx(Button, { onClick: function () { return onRemoveFile(id); }, disabled: uploading, "data-testid": "remove-button", className: styles$B.button, leftIcon: jsxRuntime.jsx(Trash2Icon, { color: hasError ? 'red-500' : 'grey-500', size: 24, noMargin: true }), hideLabel: true, variant: "filledWhite", children: "Delete file" }))] })) })] }));
 };
 
 var k$2 = 1024;
@@ -8310,13 +8308,13 @@ var IMAGE_FILES_ACCEPT = formatMimeType(IMAGE_FILES);
 var VIDEO_FILES_ACCEPT = formatMimeType(VIDEO_FILES);
 var getFormattedAcceptObject = function (accept) {
     if (accept === void 0) { accept = {}; }
-    if (accept === "document") {
+    if (accept === 'document') {
         return DOCUMENT_FILES_ACCEPT;
     }
-    if (accept === "image") {
+    if (accept === 'image') {
         return IMAGE_FILES_ACCEPT;
     }
-    if (accept === "video") {
+    if (accept === 'video') {
         return VIDEO_FILES_ACCEPT;
     }
     if (accept) {
@@ -8324,11 +8322,13 @@ var getFormattedAcceptObject = function (accept) {
     }
     return __assign(__assign(__assign({}, DOCUMENT_FILES_ACCEPT), IMAGE_FILES_ACCEPT), VIDEO_FILES_ACCEPT);
 };
-var formatAcceptFileList = function (accept) { return (Object.values(accept)
-    .reduce(function (acc, value) { return __spreadArray$1(__spreadArray$1([], acc, true), value, true); }, [])
-    .join(", ")
-    .replace(/\./g, '')
-    .toUpperCase()); };
+var formatAcceptFileList = function (accept) {
+    return Object.values(accept)
+        .reduce(function (acc, value) { return __spreadArray$1(__spreadArray$1([], acc, true), value, true); }, [])
+        .join(', ')
+        .replace(/\./g, '')
+        .toUpperCase();
+};
 var getPlaceholder = function (textOverrides, accept, maxSize) {
     var maxSizePlaceholder = maxSize && maxSize > 0
         ? "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.sizeUpToText) || 'up to', " ").concat(formatBytes(maxSize))
@@ -8336,26 +8336,48 @@ var getPlaceholder = function (textOverrides, accept, maxSize) {
     var isAcceptString = typeof accept === 'string' &&
         ['video', 'image', 'document'].includes(accept);
     var defaultPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) || 'Supports images, videos and documents', " ").concat(maxSizePlaceholder);
-    var acceptPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) || "Supports ".concat(accept, "s ").concat(maxSizePlaceholder));
+    var acceptPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) ||
+        "Supports ".concat(accept, "s ").concat(maxSizePlaceholder));
     return isAcceptString ? acceptPlaceholder : defaultPlaceholder;
 };
 var getErrorMessage = function (_a, _b, textOverrides) {
     var code = _a.code, message = _a.message;
-    var _c = _b.fileList, fileList = _c === void 0 ? "" : _c, maxSize = _b.maxSize;
+    var _c = _b.fileList, fileList = _c === void 0 ? '' : _c, maxSize = _b.maxSize;
     switch (code) {
         case ErrorCode.FileInvalidType:
-            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTypeError) || "File type must be", " ").concat(fileList);
+            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTypeError) || 'File type must be', " ").concat(fileList);
         case ErrorCode.FileTooLarge:
-            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTooLargeError) || "File is too large. It must be less than", " ").concat(formatBytes(maxSize || 0), ".");
+            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTooLargeError) ||
+                'File is too large. It must be less than', " ").concat(formatBytes(maxSize || 0), ".");
         default:
             return message;
     }
 };
+var getStatusMessage = function (_a) {
+    var acceptedFiles = _a.acceptedFiles, filesRejected = _a.filesRejected, fileList = _a.fileList, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
+    var message = '';
+    if (acceptedFiles.length > 0) {
+        var fileNames = acceptedFiles.map(function (file) { return file.name; }).join(', ');
+        message += "File".concat(acceptedFiles.length > 1 ? 's' : '', " uploaded: ").concat(fileNames, ". ");
+    }
+    if (filesRejected.length > 0) {
+        var rejectionMessages = filesRejected.map(function (rejection) {
+            var firstError = rejection.errors[0];
+            var rejectionMessage = getErrorMessage(firstError, { fileList: fileList, maxSize: maxSize }, textOverrides);
+            return "Could not upload ".concat(rejection.file.name, ": ").concat(rejectionMessage.endsWith('.')
+                ? rejectionMessage
+                : "".concat(rejectionMessage, "."));
+        });
+        message += rejectionMessages.join('');
+    }
+    return message.trim();
+};
 
 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;
     var _e = React.useState([]), errors = _e[0], setErrors = _e[1];
+    var _f = React.useState(''), statusMessage = _f[0], setStatusMessage = _f[1];
     var formattedAccept = getFormattedAcceptObject(accept);
     var fileList = formatAcceptFileList(formattedAccept);
     var placeholder = getPlaceholder(textOverrides, accept, maxSize);
@@ -8368,6 +8390,14 @@ var MultiDropzone = function (_a) {
     };
     var onDrop = React.useCallback(function (acceptedFiles, filesRejected) {
         onFileSelect(acceptedFiles);
+        var messageForScreenReader = getStatusMessage({
+            acceptedFiles: acceptedFiles,
+            filesRejected: filesRejected,
+            fileList: fileList,
+            maxSize: maxSize,
+            textOverrides: textOverrides,
+        });
+        setStatusMessage(messageForScreenReader);
         setErrors(function (previousErrors) { return __spreadArray$1(__spreadArray$1([], previousErrors, true), filesRejected.map(function (_a) {
             var errors = _a.errors;
             return ({
@@ -8376,15 +8406,15 @@ var MultiDropzone = function (_a) {
             });
         }), true); });
     }, [fileList, maxSize, onFileSelect, textOverrides]);
-    var _f = useDropzone({
+    var _g = useDropzone({
         accept: formattedAccept,
         disabled: uploading,
         maxSize: maxSize,
         onDrop: onDrop,
-    }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
+    }), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps;
     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("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
+                    _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) {
@@ -8395,7 +8425,8 @@ var MultiDropzone = function (_a) {
                         name: message,
                         progress: 0,
                     }, onRemoveFile: function () { return removeError(id); }, uploading: false }, id));
-            }), uploadedFiles.length > 0 && (jsxRuntime.jsx("div", { className: "w100 mt16", children: uploadedFiles.map(function (file) { return (jsxRuntime.jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, (!onRemoveFile ? {} : { onRemoveFile: onRemoveFile }), { uploading: uploading }), file.id)); }) })), jsxRuntime.jsx(AnimateHeight, { duration: 300, height: isOverMaxFiles ? 'auto' : 0, children: jsxRuntime.jsx("p", { className: "tc-red-500 mt16", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) || "You can upload maximum ".concat(maxFiles, " files.") }) })] }));
+            }), uploadedFiles.length > 0 && (jsxRuntime.jsx("div", { className: "w100 mt16", children: uploadedFiles.map(function (file) { return (jsxRuntime.jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, (!onRemoveFile ? {} : { onRemoveFile: onRemoveFile }), { uploading: uploading }), file.id)); }) })), jsxRuntime.jsx(AnimateHeight, { duration: 300, height: isOverMaxFiles ? 'auto' : 0, children: jsxRuntime.jsx("p", { className: "tc-red-500 mt16", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) ||
+                        "You can upload maximum ".concat(maxFiles, " files.") }) })] }));
 };
 
 var css_248z$B = ".style-module_button__mw9kQ {\n  height: 48px;\n}\n\n.style-module_chip-complete__3YkB9 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  border-radius: 8px;\n  padding: 8px 16px;\n  height: 48px;\n}";
@@ -8537,13 +8568,13 @@ var Badge = function (_a) {
     return (jsxRuntime.jsx("div", { role: "status", className: classNames$1(className, 'px16 br8 d-inline-block ai-center fw-bold p-p', { 'p-p--small': size === 'small' }, styles$y["badge--".concat(size)], getVariantClassNames(variant)), children: children }));
 };
 
-var css_248z$y = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
+var css_248z$y = ".styles-module_container__3zJJC {\n  max-width: 100%;\n  border: 0;\n  margin: 0;\n  min-width: 0;\n  padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
 var styles$x = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};
 styleInject(css_248z$y);
 
 var Checkbox = function (_a) {
     var _b;
-    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames;
+    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames, fieldLegend = _a.fieldLegend;
     var hasNoneValue = Object.keys(options).includes('NONE');
     var handleOnChange = function (newValue) {
         if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
@@ -8568,56 +8599,60 @@ var Checkbox = function (_a) {
     var isCheckboxLabelObject = function (label) {
         return label.title !== undefined;
     };
-    return (jsxRuntime.jsx("div", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$x.container, 'd-flex gap8', (_b = {},
+    var legend = fieldLegend !== null && fieldLegend !== void 0 ? fieldLegend : (Object.keys(options).length > 1
+        ? 'Select one or more options'
+        : 'You may select this option');
+    return (jsxRuntime.jsxs("fieldset", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$x.container, 'd-flex gap8', (_b = {},
             _b[styles$x.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: entries.map(function (_a) {
-            var currentValue = _a[0], label = _a[1];
-            var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            return (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('p-checkbox', {
-                            'p-checkbox--no-icon': customIcon,
-                        }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
-                            'p-label--bordered': bordered,
-                            'jc-center': customIcon,
-                            'fd-column': customIcon,
-                        }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsxRuntime.jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsxRuntime.jsx("legend", { className: "sr-only", children: legend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                return (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('p-checkbox', {
+                                'p-checkbox--no-icon': customIcon,
+                            }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
+                                'p-label--bordered': bordered,
+                                'jc-center': customIcon,
+                                'fd-column': customIcon,
+                            }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsxRuntime.jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
-var css_248z$x = ".styles-module_container__3M-sc {\n  max-width: 100%;\n}\n\n.styles-module_narrow__3VUzp {\n  max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n  max-width: 736px;\n}";
+var css_248z$x = ".styles-module_container__3M-sc {\n  max-width: 100%;\n  border: 0;\n  margin: 0;\n  min-width: 0;\n  padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__3VUzp {\n  max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n  max-width: 736px;\n}";
 var styles$w = {"container":"styles-module_container__3M-sc","narrow":"styles-module_narrow__3VUzp","wide":"styles-module_wide__3nLhz"};
 styleInject(css_248z$x);
 
 var Radio = function (_a) {
     var _b;
-    var options = _a.options, value = _a.value, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.inlineIcon, inlineIcon = _e === void 0 ? false : _e, classNamesObj = _a.classNames, _f = _a.bordered, bordered = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
+    var options = _a.options, value = _a.value, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.inlineIcon, inlineIcon = _e === void 0 ? false : _e, classNamesObj = _a.classNames, _f = _a.bordered, bordered = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.fieldLegend, fieldLegend = _h === void 0 ? 'Select an option' : _h, groupName = _a.groupName;
     var entries = Object.entries(options);
-    return (jsxRuntime.jsx("div", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$w.container, 'd-flex gap8', (_b = {},
+    var name = groupName !== null && groupName !== void 0 ? groupName : generateId();
+    return (jsxRuntime.jsxs("fieldset", { className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles$w.container, 'd-flex gap8', (_b = {},
             _b[styles$w.wide] = wide,
             _b[styles$w.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: entries.map(function (_a) {
-            var currentValue = _a[0], label = _a[1];
-            var checked = value === currentValue;
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            var hideIcon = label === null || label === void 0 ? void 0 : label.hideBox;
-            var isRadioLabelObject = function (label) {
-                return label.title !== undefined;
-            };
-            return (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('p-radio', {
-                            'p-radio--no-icon': customIcon || hideIcon,
-                            'p-radio--centered': !label,
-                        }), id: currentValue, type: "radio", value: currentValue, onChange: function () { return onChange(currentValue); }, checked: checked, "data-testid": "radio-input-".concat(currentValue), disabled: disabled }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
-                            'jc-center': customIcon && !inlineIcon,
-                            'fd-column': customIcon && !inlineIcon,
-                            'p-label--bordered': bordered,
-                        }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsxRuntime.jsx("div", { className: classNames$1('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsxRuntime.jsx("legend", { className: "sr-only", children: fieldLegend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === currentValue;
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                var hideIcon = label === null || label === void 0 ? void 0 : label.hideBox;
+                var isRadioLabelObject = function (label) {
+                    return label.title !== undefined;
+                };
+                return (jsxRuntime.jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsxRuntime.jsx("input", { className: classNames$1('p-radio', {
+                                'p-radio--no-icon': customIcon || hideIcon,
+                                'p-radio--centered': !label,
+                            }), id: currentValue, type: "radio", value: currentValue, onChange: function () { return onChange(currentValue); }, checked: checked, "data-testid": "radio-input-".concat(currentValue), disabled: disabled, name: name }), jsxRuntime.jsxs("label", { htmlFor: currentValue, className: classNames$1(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
+                                'jc-center': customIcon && !inlineIcon,
+                                'fd-column': customIcon && !inlineIcon,
+                                'p-label--bordered': bordered,
+                            }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsxRuntime.jsx("div", { className: classNames$1('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "p-p", children: label.title }), jsxRuntime.jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
 var css_248z$w = "@keyframes style-module_appear-in__3U2lu {\n  0% {\n    transform: translateY(100%);\n  }\n  80% {\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes style-module_disappear-out__6pOVr {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n.style-module_wrapper__200Xu {\n  position: relative;\n  top: 0;\n  overflow: hidden;\n}\n\n.style-module_container__aOENo {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  overflow: auto;\n  max-height: 90vh;\n  bottom: 0;\n  position: fixed;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-in;\n}\n.style-module_containerClose__3-nqc {\n  animation-name: style-module_disappear-out__6pOVr;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n@media (max-width: 34rem) {\n  .style-module_body__3yNly {\n    padding-bottom: 48px;\n  }\n}";
@@ -11604,13 +11639,13 @@ var associatedClassForCardState = function (state, dropshadow) {
     return baseClass;
 };
 
-var css_248z$o = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
+var css_248z$o = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-primary-500);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
 var styles$n = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
 styleInject(css_248z$o);
 
 var Chip = (function (_a) {
     var className = _a.className, value = _a.value, onRemove = _a.onRemove;
-    return (jsxRuntime.jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles$n['chip']), children: [value.leftIcon && (jsxRuntime.jsx("img", { className: "mr8 ".concat(styles$n['chip-image']), src: value.leftIcon, alt: value.value })), jsxRuntime.jsx("div", { className: "mr8", children: value.value }), jsxRuntime.jsx("button", { className: "c-pointer ".concat(styles$n['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, children: jsxRuntime.jsx(XIcon, { className: styles$n['chip-remove-button'] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles$n['chip']), children: [value.leftIcon && (jsxRuntime.jsx("img", { className: "mr8 ".concat(styles$n['chip-image']), src: value.leftIcon, alt: value.value })), jsxRuntime.jsx("div", { className: "mr8", children: value.value }), jsxRuntime.jsx("button", { className: "c-pointer ".concat(styles$n['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, "aria-label": "Remove ".concat(value.value, " option"), children: jsxRuntime.jsx(XIcon, { className: styles$n['chip-remove-button'] }) })] }));
 });
 
 var Autosuggest = {};
@@ -15403,7 +15438,7 @@ styleInject(css_248z$h);
 
 var TableInfoButton = function (_a) {
     var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (jsxRuntime.jsx("button", { className: "p-btn--secondary ".concat(styles$g.button, " ").concat(className), type: "button", "data-testid": "ds-table-info-button", onClick: onClick, children: jsxRuntime.jsx(Info, { size: 20 }) }));
+    return (jsxRuntime.jsx("button", { className: "p-btn--secondary ".concat(styles$g.button, " ").concat(className), type: "button", "data-testid": "ds-table-info-button", onClick: onClick, "aria-label": "View more information", title: "View more information", children: jsxRuntime.jsx(Info, { size: 20 }) }));
 };
 
 var TableButton = function (_a) {