optimized-react-component-library-xyz123 0.1.69 → 0.1.70

package/dist/index.js

@@ -897,11 +897,11 @@ var ExploreFiles = ({
                 showErrors && questionObject.error ? "filePickButton error" : ""
               ),
               "aria-describedby": `${aboutId} ${questionObject.hasValidationError ? errorId : ""}`.trim(),
-              "aria-label": `${activatedLanguage === "sv" ? "Knap aria-label V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
+              "aria-label": `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
               children: activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText + "span aria-hidden=true" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText })
         ]
       }
     ),

package/dist/index.mjs

@@ -832,11 +832,11 @@ var ExploreFiles = ({
                 showErrors && questionObject.error ? "filePickButton error" : ""
               ),
               "aria-describedby": `${aboutId} ${questionObject.hasValidationError ? errorId : ""}`.trim(),
-              "aria-label": `${activatedLanguage === "sv" ? "Knap aria-label V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
+              "aria-label": `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
               children: activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"
             }
           ),
-          /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText + "span aria-hidden=true" })
+          /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText })
         ]
       }
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/css/styles.css

@@ -883,3 +883,1058 @@ dd {
 .errorSummary-text {
   color: #8e0039;
 }
+
+/* ---------- FILE UPLOAD ---------- */
+.files-upload {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Drop Zone */
+.files-drop-zone {
+  border: 2px dashed #6e3282;
+  border-radius: 12px;
+  padding: 3rem 2rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  background-color: #fafafa;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.files-drop-zone:hover {
+  border-color: #6e3282;
+  background-color: #f5ebf8;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
+}
+
+.files-drop-zone.drag-active {
+  border-color: #6e3282;
+  background-color: #f5ebf8;
+  transform: scale(1.02);
+  box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
+}
+
+.files-drop-zone:focus {
+  /* border-color: #6e3282;
+  background-color: #f5ebf8;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
+  transform: translateY(-3px);
+
+  animation: focusPulse 1s ease-in-out infinite;
+  box-shadow: inset 0 0 0 4px #6e3282;
+  
+  border: none; */
+  border: 0.2rem solid #6e3282;
+}
+
+.files-drop-zone:focus-visible {
+  outline-offset: 0 !important;
+  outline-style: solid !important;
+  outline-color: #fff !important;
+  outline-width: 2px !important;
+  box-shadow: 0 0 0 4px #000 !important;
+}
+
+.files-drop-content {
+  pointer-events: none;
+}
+
+.files-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  opacity: 0.7;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.files-drop-text {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  color: #333;
+  font-weight: 500;
+}
+
+.files-drop-info {
+  font-size: 0.9rem;
+  color: #666;
+  margin: 0;
+}
+
+.files-allowed-types {
+  font-size: 0.85rem;
+  color: #555;
+  margin: 0.75rem 0 0 0;
+  padding: 0.5rem;
+  background-color: rgba(146, 64, 252, 0.1);
+  border-radius: 6px;
+  border-left: 3px solid #ce95e0;
+}
+
+.files-allowed-types strong {
+  color: #6e3282;
+}
+
+.files-input-hidden {
+  display: none;
+}
+
+/* Summary */
+.files-summary {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+
+.files-summary-stats {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.stat {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  background-color: #e9ecef;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stat.pending {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.stat.completed {
+  background-color: #d1e7dd;
+  color: #0a3622;
+}
+
+.stat.error {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.files-summary-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.action-button {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-button.primary {
+  background-color: #1ea7fd;
+  color: white;
+}
+
+.action-button.primary:hover {
+  background-color: #1890ff;
+  transform: translateY(-1px);
+}
+
+.action-button.secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.action-button.secondary:hover {
+  background-color: #5a6268;
+  transform: translateY(-1px);
+}
+
+/* Files List */
+.files-list {
+  margin-top: 1.5rem;
+}
+
+.files-list h4 {
+  margin-bottom: 1rem;
+  color: #333;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.files-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  margin-bottom: 0.75rem;
+  background-color: white;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.file-item:hover {
+  background-color: #f8f9fa;
+  border-color: #dee2e6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.file-item.uploading {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+}
+
+.file-item.completed {
+  background-color: #f6ffed;
+  border-color: #b7eb8f;
+}
+
+.file-item.error {
+  background-color: #fff2f0;
+  border-color: #ffccc7;
+}
+
+.file-icon-status {
+  font-size: 1.5rem;
+  min-width: 2rem;
+  text-align: center;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 0.5rem;
+  word-break: break-word;
+}
+
+.file-details {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: #666;
+  flex-wrap: wrap;
+}
+
+.file-size {
+  color: #666;
+}
+
+.file-status {
+  color: #1ea7fd;
+  font-weight: 500;
+}
+
+.file-error {
+  color: #dc3545;
+  font-weight: 500;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background-color: #e9ecef;
+  border-radius: 2px;
+  margin-top: 0.5rem;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: #1ea7fd;
+  transition: width 0.3s ease;
+  border-radius: 2px;
+}
+
+.file-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  background: none;
+  border: 1px solid transparent;
+  padding: 0.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-btn.upload {
+  color: #1ea7fd;
+  border-color: #1ea7fd;
+}
+
+.action-btn.upload:hover {
+  background-color: #1ea7fd;
+  color: white;
+}
+
+.action-btn.retry {
+  color: #fd7e14;
+  border-color: #fd7e14;
+}
+
+.action-btn.retry:hover {
+  background-color: #fd7e14;
+  color: white;
+}
+
+.action-btn.remove {
+  color: #6e3282;
+  border-color: #6e3282;
+}
+
+.action-btn.remove:hover {
+  background-color: #6e3282;
+  color: white;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .files-drop-zone {
+    padding: 2rem 1rem;
+  }
+
+  .files-icon {
+    font-size: 3rem;
+  }
+
+  .files-drop-text {
+    font-size: 1rem;
+  }
+
+  .files-summary-stats {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .files-summary-actions {
+    flex-direction: column;
+  }
+
+  .action-button {
+    justify-content: center;
+  }
+
+  .file-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .file-details {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .file-actions {
+    align-self: flex-end;
+  }
+}
+
+@media (max-width: 480px) {
+  .files-upload {
+    padding: 0 0.5rem;
+  }
+
+  .files-drop-zone {
+    padding: 1.5rem 1rem;
+  }
+
+  .file-item {
+    padding: 0.75rem;
+  }
+}
+
+/* ---------- END FILE UPLOAD ---------- */
+
+/* ---------- ADD FILES  ---------- */
+
+/* ExploreFiles.tsx  */
+
+.invisible {
+  display: none;
+  width: 1px;
+}
+
+.filePickLabel {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: 48px;
+  border: 1px solid #747474;
+  border-radius: var(--bs-border-radius);
+}
+.filePickLabel:focus {
+  border: #000000 2px solid;
+  box-shadow: none;
+}
+.filePickLabel .filePickButton {
+  cursor: pointer;
+  padding: 16px;
+  height: 100%;
+  background: #747474;
+
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+
+  display: flex;
+  /* padding: 0px 16px; */
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  color: #ffff;
+
+  /* Body/B2 (Main) Regular */
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+}
+
+.filePickButton {
+  width: auto !important;
+  border: none;
+  margin-left: 0px !important;
+}
+
+.filePickButton.error {
+  background: #8e0039 !important;
+  color: #fff !important;
+}
+@media (max-width: 990px) {
+  .filePickLabel .filePickButton {
+    font-size: 14px;
+    line-height: 14px;
+    text-align: center;
+  }
+}
+
+.filePickLabel .filePickText {
+  padding-left: 16px;
+  color: #000;
+
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.inputContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  .inputContainer {
+    margin-bottom: 16px;
+  }
+}
+
+.inputContainer button {
+  margin: 0;
+  /* padding: 0; */
+  padding: 8px 24px;
+  margin-left: 16px;
+  height: 50px;
+  width: 200px;
+}
+
+.inputContainer input[type='text'] {
+  font-size: 16px;
+}
+
+.custom-file-button input[type='file'] {
+  margin-left: -2px !important;
+}
+
+.custom-file-button input[type='file']::-webkit-file-upload-button {
+  display: none;
+}
+
+.custom-file-button input[type='file']::file-selector-button {
+  display: none;
+}
+
+.custom-file-button:hover label {
+  background-color: #dde0e3;
+  cursor: pointer;
+}
+
+/* DropFiles.tsx  */
+
+@media (max-width: 768px) {
+  .DropZoneContainer {
+    display: none;
+  }
+}
+
+.DropZone {
+  color: #000;
+  margin-top: 20px;
+  margin-bottom: 16px;
+
+  /* Body/B1 Regular */
+  font-family: Arial;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 120% */
+
+  display: inline-flex;
+  width: 100%;
+  height: 180px;
+  position: relative;
+  clip-path: inset(0 round 8px 8px 8px 8px);
+
+  background: var(--neutral-350, #f7f7f7);
+
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.DropZone::before {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  right: -7px;
+  bottom: -7px;
+  border: 9px dashed rgba(0, 0, 0, 0.6);
+  border-radius: 15px 15px 15px 15px;
+  box-sizing: border-box;
+}
+
+.DropZone:hover {
+  background: var(--neutral-350, #f7f7f7);
+  opacity: 0.9;
+  cursor: copy;
+}
+.ClipboardLink {
+  display: block;
+  position: relative;
+  z-index: 2000;
+  cursor: pointer;
+  font-size: '12px';
+  text-decoration: 'underline';
+  color: black;
+}
+.ClipboardLink:hover {
+  cursor: pointer;
+}
+
+/* SelectedFiles.tsx  */
+
+.makeTopSpace {
+  margin-top: 12px;
+}
+/* @media (max-width: 768px) {
+    .makeTopSpace {
+        margin-top: 0px;
+    }
+} */
+
+.UploadedFile {
+  margin-top: 24px;
+}
+/* @media (max-width: 768px) {
+    .UploadedFile {
+        margin-top: 24px;
+    }
+} */
+.uploadFileRow {
+  max-width: 555px;
+}
+@media (max-width: 768px) {
+  .uploadFileRow {
+    margin-left: 0px;
+  }
+}
+.uploadedFileName {
+  /* margin-left: 8px; */
+  color: #000000;
+  position: relative;
+  border: 0px solid red;
+  width: 76%;
+  /* max-width: 430px; */
+  top: -21px;
+  left: 24px;
+}
+
+.desktopFileName {
+  display: block;
+}
+.mobileFirstFileName {
+  display: block;
+}
+
+.uploadedDot.mobileVersion {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  svg.uploadFileIcon {
+    display: none;
+  }
+  .uploadedDot.mobileVersion {
+    display: flex;
+  }
+}
+
+.lastCol {
+  display: flex;
+  justify-content: flex-end;
+  max-width: 62px;
+  padding: 0;
+  margin: 0;
+}
+
+.fileInListContainer {
+  max-width: 624px;
+}
+
+.fileListUnorderedList {
+  list-style: none !important;
+  padding: 0;
+  margin: 0;
+}
+
+.fileInList {
+  width: 100%;
+}
+.fileInList .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 100% !important;
+  border: 0px solid black;
+
+  padding: 0px 0px;
+  --bs-gutter-x: 0px !important;
+}
+
+.fileInList .row .col {
+  padding: 0;
+  margin: 0;
+}
+
+.fileInList .row .lastCol {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fileInList .makeSpace {
+  border-bottom: 1px solid #747474;
+  /* margin-top: 24px; */
+}
+
+.fileInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 13px;
+}
+.uploadedPercentage {
+  /* Body/B3 Regular */
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 123.077% */
+  margin-top: 2px;
+}
+@media (max-width: 768px) {
+  .uploadedPercentage {
+    display: none;
+  }
+}
+.trashCan {
+  width: 57px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: start;
+  align-items: center;
+  padding: 0;
+}
+.trashCan a {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.trashCan svg {
+  width: 24px;
+  height: 27px;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+}
+
+.trashCanPositioning {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 0;
+
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: -6px;
+  left: 12px;
+}
+
+.trashCanText {
+  color: #6e3282;
+
+  /* Body/B4 Regular */
+  font-family: Arial;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.removeError {
+  width: 57px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: start;
+  align-items: center;
+  padding: 0;
+}
+.removeError svg {
+  width: 16px;
+  height: 18px;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+}
+.removeError a {
+  cursor: pointer;
+}
+
+.uploadedDot {
+  border-radius: 17px;
+  background: var(--red-green-green, #008e55);
+  display: flex;
+  width: 16px;
+  height: 16px;
+  padding: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.uploadedDot.uploadFailed {
+  background: var(--red-green-red, #8e0039);
+
+  color: var(--neutral-300, #fff);
+  /* Body/B3 Bold */
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px; /* 123.077% */
+}
+
+.uploadedDot svg {
+  stroke-width: 1.5px;
+  stroke: var(--neutral-300, #fff);
+  flex-shrink: 0;
+}
+
+.uploadStatus {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: 0;
+  right: 0;
+}
+@media (max-width: 768px) {
+  .uploadStatus {
+    display: none;
+  }
+}
+/* 
+.uploadStatus {
+    display: flex;
+
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-shrink: 0;
+    padding: 0;
+} */
+.uploadFileIcon {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+
+  position: relative;
+  border: 0px solid red;
+  max-width: 70px;
+  top: 0;
+  left: 0;
+}
+.uploadFileName {
+  display: flex;
+  align-items: normal;
+  justify-content: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 0;
+  color: #000;
+
+  /* Body/B3 Bold */
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+.uploadFileName.uploadFailed {
+  color: var(--red-green-red, #8e0039);
+}
+.errorMessageAddingFile {
+  color: var(--red-green-red, #8e0039);
+  /* Body/B3 Regular */
+  font-family: Arial;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 123.077% */
+  /* padding: 0;
+    margin-top: -8px; */
+}
+
+@media (max-width: 768px) {
+  .errorMessageAddingFile {
+    margin-left: 12px;
+  }
+}
+
+.selectedFilesLinkButton {
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+  padding-left: 0;
+  gap: 8px;
+  flex-shrink: 0;
+  stroke-width: 2px;
+  stroke: var(--purple-900-primary, #6e3282);
+  color: var(--purple-900-primary, #6e3282);
+  /* Body/B2 (Main) Regular */
+  font-family: Arial;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  text-decoration: none;
+  cursor: pointer;
+
+  background-color: transparent;
+  border: 0px;
+}
+
+.selectedFilesLinkButton:hover {
+  color: var(--purple-900-primary, #6e3282);
+  text-decoration: underline;
+}
+
+.uploadFileRow_x {
+  max-width: 630px;
+}
+
+/* Indicator.tsx  */
+
+.uploadIndicator {
+  height: 6px;
+  flex-shrink: 0;
+  margin-top: 0px;
+
+  border-radius: 8px 8px 8px 8px;
+}
+@media (max-width: 768px) {
+  .uploadIndicator {
+    display: none;
+  }
+}
+.uploadIndicator.uploadDone {
+  width: 100%;
+  background: var(--red-green-green, #008e55);
+}
+.uploadIndicator.uploadFailed {
+  width: 10%;
+  background: var(--red-green-red, #8e0039);
+}
+.uploadIndicator.uploadLoading {
+  width: 50%;
+  background: var(--red-green-red, rgb(211, 165, 0));
+}
+
+.UploadedFile .divider {
+  border: 1px solid #747474;
+  margin-top: 24px;
+}
+@media (max-width: 768px) {
+  .UploadedFile .divider {
+    margin-top: 0px;
+  }
+}
+
+/* Clipboard.tsx  */
+
+.ClipboardFiles {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+
+  margin-top: 32px;
+  background-color: #222;
+  animation-name: color;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.ClipboardFiles.clicked {
+  background-color: #ccc;
+  animation-name: none;
+  cursor: copy;
+}
+
+@keyframes color {
+  0% {
+    background-color: #ddd;
+  }
+  25% {
+    background-color: #ccc;
+  }
+  50% {
+    background-color: #bbb;
+  }
+  75% {
+    background-color: #ccc;
+  }
+  100% {
+    background-color: #ddd;
+  }
+}
+
+/* AddFiles.tsx */
+
+.addFilesMandatory {
+  margin-bottom: 16px;
+}
+
+.addFilesMandatory.error {
+  display: inline;
+  margin-bottom: 0px;
+}
+
+/* preview */
+
+/* .addFilesPreviewContainer {
+    margin: 0;
+    margin-top: 16px;
+    width: 100%;
+    flex-direction: row;
+}
+@media (max-width: 768px) {
+    .addFilesPreviewContainer {
+        flex-direction: column;
+    }
+    .addFilesPreviewContainer .answer {
+        margin: 0;
+        padding: 0;
+        margin-top: 8px;
+        margin-bottom: 8px;
+
+        width: 100%;
+    }
+}
+
+.addFilesFieldset p {
+    font-size: 16px;
+}
+
+.addfileserror {
+    margin-bottom: 16px !important;
+    margin-top: 16px !important;
+} */
+
+/* ---------- END ADD FILES  ---------- */