@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/assets/uploadFileIcon.svg

@@ -0,0 +1,9 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.5" width="60" height="60" fill="url(#pattern0_23480_25488)"/>
+<defs>
+<pattern id="pattern0_23480_25488" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_23480_25488" transform="scale(0.00195312)"/>
+</pattern>
+<image id="image0_23480_25488" width="512" height="512" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAIABJREFUeJzt3XmcXXV9+P/X+04yE0TZBKEudcHWpW6g1tpWpX6VCpKZRA0qshQV0KrUIpCZCdZrhcwEkFarrWBtretPUpOZCYhal2BVxBWr4AqKIptIBAUyM5n7/v2RoCEkYTJz7/3c5fV8PHiYzNx7zqsN5Lznc849ByRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiR1tSgdIKk1HVbNPXoW8ICFC9kja9wPYAYqFdjz7tdkjZlKhdsBZoKNvcldALXktrXD8asy5ZJmwwFA6iKHnpO77z7FI2s9PJIajwzYj+DBNXhQJA8iOAB4ALB3HXaXwK+AW7f+34BfZHBtwM+yxrW1KX66rhp31mF/knaBA4DUYarVrHynj0fUkscnPJ7g8QmPBR4JPKh03w7cQvJTgqsiuTLhuz01rlxzRlxbOkzqVA4AUhtbdmH2bLyGx1bgqdR4GsHTgCfD5iX7DnA78L1MvglcnnD5uiF+QESWDpPanQOA1EaWnZe7TU/yjAyeDTyb5BnA/Ut3NdkG4PKAyzO47K4evvjp0+KO0lFSu3EAkFrYsguzZ+NPeHpPjRckPA94OtBbuqvFTAFfBj4TFf5n4SP5xuojY6Z0lNTqHACkFrP43Ny3Z5ojEl5A8nyCfUo3tZkNwOdILq7AhJ9GkLbPAUBqAQNn5sOih8NqsDjgr4GFpZs6xAzwlQxWLwg+vmZ5XFc6SGoVDgBSIYefnQf0buJlBEclPA3/e2y0JPlaBBdO9fDhT5weN5YOkkryLxypiQ49J3dfNMPSSF4BPB/oKd3UpTYBn4rgA7/eyMT6amwsHSQ1mwOA1ASLz8qDKxVOAI4C9ijdo3vYAHysBv+xbii+VjpGahYHAKlBDj0nd180zVEBJ275fL5a3+UZvGv6fqy+5OSYLB0jNZIDgFRnh5+dB/TO8JqE1wMPLN2jObkZ+M9a8K/rBuNnpWOkRnAAkOpkyzL/KcCReBV/p5hO+O8IRsYH4zulY6R6cgCQ5ql/Zf4FwWDAC/G/qU72mVqFN69bHl8pHSLVg39ZSXO0dDT/ciZZHnBE6RY11ZcIVo0PxrrSIdJ8OABIu2hgNP+cZBR4VukWlZNwaVYYdEVA7coBQJqlgZX5+AiqCS/B/3b0e5/JGm+aWBH/VzpE2hX+JSbdhyPOzIcs6OGshGOASuketaRNBP85s4m3XnRG/KJ0jDQbDgDSDiw7L3ebmuQUYAjYvXSP2sKdAaO/nuQc7y6oVucAIG1H/0guCzgbeETpFrWh5OoKvHHtcFxUOkXaEQcAaSsvHslHbYJ3Ay8o3aL2l3DRQvi7jw/FNaVbpG05AEjAiefnwhtv5dSANwO7le5RR9lIMLL/3oxccFJMl46R7uYAoK43sDKfQfDvwBNKt6hzJXwbOH5iKL5VukUCBwB1sRPPz4U338qKhDPwsbxqjk3A26d25y0+bEilOQCoKy0dzSfX4P0kTyndoq50ZVR45djy+GrpEHUvBwB1lWUXZs/01bw5YQWwoHSPutqmDN7a9yhGVh8ZM6Vj1H0cANQ1Bs7Mh9HDh4Bnl26RtrK+p8Ixa5bHdaVD1F28q5m6wsBILqXCFXjwV+s5ZCb5Tv9ILisdou7iCoA62rJq9k71ch7B60q3SPchSd41dX9O8wJBNYMDgDrWEWfmQ3p6WA08s3SLNFsRfHMGlq4bjJ+VblFn8xSAOtLSlfmcnh6+jgd/tZlMDo7k6/1n5V+VblFncwBQx1myMt9YCz4LHFC6RZqLgP2iwieXjOZrS7eoc3kKQB3jxPNz4U0beDfJCaVbpHoJ+I/J3flbrwtQvTkAqCMsOy/3mZ5kdcJzS7dIDfDl2kIG1p0at5QOUedwAFDbW3J2HsgMlyT8UekWqYGu6pnh8DVnxLWlQ9QZHADU1vpX5dOixsXAg0q3SE1wY1ZYPLE8vl46RO3PiwDVtgZG8nlR47N48Ff3OCBqrF+6Mo8oHaL25wCgtrRkZR4DfALYo3SL1GS714K1A6N5VOkQtTcHALWdJSN5YgbvBxaWbpEKWUDyof6RfH3pELUvBwC1lYHRfF3Ce/DfXSkC3jkwkn9fOkTtyb9E1TYGRnI5ybvw4lXpbgGc1z+SbykdovbjAKC2sGQk3wyMlu6QWlFAdWBlvrV0h9qLP0mp5W1Z4jyvdIfU6hKGJ4ZipHSH2oMDgFraktF8QybvLN0htYuAU8eG4u2lO9T6HADUspaM5IlbLvjz31Np9jLh1RND8R+lQ9Ta/ItVLal/ZfZHsAboKd0itaFawNFjQ/HR0iFqXQ4AajlLV+ZzasEngUWlW6Q2Nh1wxNhQfLp0iFqTA4BaysBoPpHkUmDv0i1SB/hN1Hj22Iq4onSIWo8DgFrGi1blQ2dqXA48uHSL1EGu66nwzDXL47rSIWot3gdALWFZNe8/k6zDg79Ubw+dqfHJJdXcq3SIWosDgIpbdmH2TPXxEZKnlG6ROtSf0MuFJ56fPj9Dv+MAoOKmruYcYHHpDqmTZfD8m2/1hlr6Pa8BUFH9o3l0JB8s3SF1i4RXeY8AgQOAClo6mk+uJV8G7le6ReoiG2vw7HVD8bXSISrLAUBFLDsv95mc5GsBjyrdInWhn1cW8LS1p8XNpUNUjtcAqOmq1axMTfJRD/5SMQ+rbeJjh1RzQekQleMAoKa7oo8VwKGlO6Qud8hevbyldITK8RSAmmrpaP5lLfk84E8eUnm1qHHo2Ir4bOkQNZ8DgJrmhSO59wL4FvDw0i2SfucXtYU8Zd2pcUvpEDWXpwDUNAvhP/HgL7Wah1SmeR+Z/kDYZRwA1BT9K/OEhIHSHZK2q79/lNeVjlBzOfGp4V50Zj58pof/A/Yo3SJphzbWkoPWDcf3S4eoOVwBUGNlxkwPF+DBX2p1iyrBfy67MHtKh6g5HADUUEtW8Xr8yJ/ULv5s6mpOLh2h5vAUgBpm8Wj+YSW5Erh/6RZJs3bnTA9Puej0+FHpEDWWKwBqmEryLjz4S+3mfj0zvL9aTY8PHc4/YDVE/2i+DB/xK7WrP79iESeVjlBjeQpAdbdsNPecSq4CHly6RdKcbehNHrN6OH5ZOkSN4QqA6m6yxgge/KV2t/dkhZHSEWocVwBUV0vOyqdkha8DfpRIan+1WoW/WLc8vlI6RPXnCoDqqlbhn/HgL3WKSqXGu7w3QGdyAFDd9I/mywKeU7pDUl09dfpqXlU6QvXnKQDVxSHVXLRnHz8A/rB0i6T6SvglFQ6cWB6/Kd2i+nEFQHWxVy8n48Ff6kgB+8UMp5buUH25AqB5W1LNvbKXqwn2Kd0iqWF+O93DH33i9LixdIjqwxUAzVv2MejBX+p491+4iTNKR6h+XAHoQEuqudd0H3HxUGxo9L6OODMf0tPDj4DdGr0vScVNRw+PGzs9ri4dovlbUDpAs7N0ZT4wgydm8kjgEQSPIHhIJvsGPJDN/+wGkGz+gx0YSYCNwF3AbcBGktsJfk7wk4BrEq6p1PjJgil+uroaU7va1VNhOR78pW6xsDbD24CjSodo/lwBaEFLqrkXi3hmLXlmwNOBJwIPafBuZ4ArgS8TXFap8ZW1w/HDnb3hRWflH8xUuAZY1OA2Sa2jlhUeP7E8flA6RPPjCkALWFbN3smF/EVUOAz464QnkFSaPJ31AE8CnkTymlrAwEjeAlxGcPF0hfFtL/6ZqXAaHvylblOJGoPA8aVDND+uABRySDUX7dXLC2rBkQFHAA8o3XQfaglfDlgTsLZW467Y/NP//UqHSWq66Z4Z/mjNGXFt6RDNnQNAky1elX/WU+OEhJcAe5TumYebgP1LR0gqJHn3+HC8vnSG5s4BoAkOPSd3320TxwGvYfP5fElqd3dN9/Ao7wvQvrwGoIEOPzsPWLiJN7CJk9h8lb4kdYrdFs7wRmCwdIjmxhWABlh8bu5bmeZU4GT8iJykzrWhNslD11XjztIh2nWuANRR/6p8QKXGUE5zMrB76R5JarC9e3p5OfC+0iHadQ4AdVCtZuVbiziaGqsSDijdI0nNUgvegANAW/IUwDwtOSufksF7CZ5WukWSSqgEz1o7GF8s3aFd4wrAHB1SzUV79TGYMAT0lu6RpFJqyesBB4A24wrAHPSP5EEBHwYeV7pFklrAdE+Nh69ZETeUDtHs+TjgXZEZ/aP5dwGX4cFfku62cCZ4RekI7RpXAGbpsGru0dfHBxIGSrdIUgu6cnwonlA6QrPnADALS0fzyTPJmoBHlW6RpFZVq/HUdSvim6U7NDueArgPAyO5tJZ82YO/JO1cpcJxpRs0ew4AO9E/mn8H/Dc+8U6S7lPCy088PxeW7tDsOABsT2YsGcl/juSf8f9HkjQrAfvd+CsOK92h2fHgto1qNSv9q3hvwt+VbpGkdhPBS0o3aHa8CHAryy7Mnqkf8wGCo0q3SFKb2rD/Pux/wUkxXTpEO+cKwN0yY+pq3uPBX5LmZe8bf80hpSN03xwAYPMNfkZ4N/Dq0imS1PZmWFo6QffNAQAYGOVtEby2dIckdYIIllSr6fGlxXX9H1D/SL4SWFG6Q5I6yB98axF/VjpCO9fVA8DASD4v4D2lOySp4ySHl07QznXtAPCiM/PhwEcBb1ohSfX3/0oHaOe68mOAh1Rz0Z59fBF4aukWSepQM5tgv4uHYkPpEG1fV64A7LGId+HBX5IaqWcBfhywlXXdADAwkksjeVXpDknqeOlpgFbWVQPAEWfmQ4D3lu6QpK4QPK90gnasqwaAngrvAx5YukOSusRjtvzgpRbUNQPAwGgeS/DXpTskqZss6PF+AK2qKwaAxefmvpmcW7pDkrpNwjNKN2j7FpQOaIbKJs4G9ivdIUldyBWAFtXx9wHoH8mDAr5Ol6x2SFKLuWv/fdjTxwO3no4/KAa8gy74v1OSWtRuN9zCE0tH6N46+sC4eDQHgGeV7pCkbtbT43UArahzB4DMiOStpTMkqdtljSeXbtC9dewAsGQVywL/pZOk0jL4k9INurfOHAAyI5MVpTMkSRA4ALSijhwAlozyfOBJpTskSQDs3b8qH1w6QvfUkQNAwptKN0iS7sFVgBbTcQPA4pX5WOD5pTskSb8XNZ5QukH31HEDQASvpgtucCRJbSV4XOkE3VNHDQDLqtkLHFu6Q5K0jeThpRN0Tx01AEz2MRDe81+SWpEDQIvpqAGgErysdIMkabv+kExPz7aQjvnD6F+VD4gaNwG7lW6RJN1bZQH7rz0tbi7doc06ZgWgUuMIPPhLUsvKGo8o3aDf65gBoAaLSzdIknYsZ/jD0g36vY44BbDswuyZupobgX1Lt0iSdujGgMsz+GalxjdnevjmxPK4vnRUt+qIAWBgZT6D4CulOyRJu+xGgi9mcmlPjfVrh7mSiCwd1Q06YwAYzWGSs0p3SJLm7Rbgfwk+1RNcvGZ5XFc6qFN1xgAwkhcDh5fukCTVVQJXRHIxPawbO52vuTpQP+0/AGTGwAi3EOxTOkWS1FDXAWsqweq1g/HF0jHtru0HgKWr8nG1GleV7pAkNdVVGXw0NvFf42fEz0vHtKO2HwCWjOTLEz5SukOSVEQN+FzCBbdPsnZ9NTaVDmoXnXAfgCeWDpAkFVMBnhdw4Z59/KR/JN/Sf1buXzqqHbT9AJDwpNINkqSW8NCAalT42cBIfmDpqvQRxDvR9gMA8JjSAZKkltILHFOr8d2BkVyzdGU+s3RQK2rrawCq1ax8q487gb7SLZKklvaZqLBibHl8tXRIq2jrAWDgzHwYPfysdIckqW18JmBwbCi+UTqktLY+BVBZwMNLN0htKoEbEn5ZOkRqsuclfK1/JD+yeDS7+uFEbT0A1JL9SjdIbeQrASfN9PDHU7uz2/hQPHhiKB502yS71YInRPL3wHdLR0pNEAEvryTf7x/Jfzz0nNy9dFAJ7X0KYCRfDby3dIfU4n4AvH58KD4zmxf3j+SygH8CHtLYLKll/CKSobEhPtRNtxpu6xUAwsf/SjsTwZreSZ4224M/wMRQrO5NDgK+0MA0qZU8JIMP9I/y+f5V2TWfLGvvAaDGnqUTpFYVsHrhozhydTV+u6vvXT0cv6xNcljCpY1ok1pRwHOixrcHRvMfllWzt3RPo7X1ABAVOv4PSJqLhG/PTPI3q4+MmbluY1017syFvAT8pI26Sh/JW6f6+Fan3z+grQcA0gFA2o47eyq8fF017pzvhtadGrdUglcAcx4kpDb1+FrwxYGRfEenrga09QBQwwFA2lYmb1y7PL5Xr+2tHYwvBpxZr+1JbaQCnDy9iMsGVubjS8fUW1sPAAE+9UnaWvDfE8NR90/GLDyQtyX4/HV1pUwOJvj6ktF8A5lt/em5rbX1AADcUTpAaiHX9fZyUiM2vPrImFlQ4eUktzZi+1Ib2C2Tdy4ZZe2Sau5VOqYe2noASAcA6W61rHHs6lOiYQfoNcvjughObNT2pXaQMJB9XLFkVf5p6Zb5ausBINIBQAIgOXNiRXy+0bsZG4qPZ/C+Ru9HanEPzxqXbrkZXdtq6wGAYN5XOUsd4Eu3TfG2Zu1sYw9/B3y/WfuTWtQi4L39I3n+iefnwtIxc9HWA0C6AqBuF/w64Oj11WjaBbGfPi3uIDgS2NisfUqtKuDEm3/FxS8cyb1Lt+yqth4AouIFSepuASeNDcVPm73f8cH4DjDc7P1KrSiD5y+Ay5auzD8u3bIr2noAqMzwk9INUikZvG9sMC4stf/xQf454ZJS+5dazGNqcFn/yvyL0iGz1dYDwB29/ITNzzWXus2PCf6+aEFE9iXHATcU7ZBaRbBPBJ9dMpIvLp0yG209AHz6tLgDuLl0h9RkkwlHTiyP35QOWT0cvwz4GxzEpbv1JXxsyUi2/Edm23oA2OKa0gFSM2UyPDEU3yrdcbexofh0wnmlO6QW0pPwnoHRHCwdsjPtPwCk1wGoiySfmhjin0pnbOuAfRgi+WrpDqmFBMnIwEiOlg7ZkbYfADL4YekGqUluyuQ4Ilpuuf2Ck2K6Asfg3TmlbS0fGMmWfJhW2w8AwOWlA6QmyEry6okVcVPpkB1ZOxw/TDi5dIfUglYMjOY5pSO21fYDwMzmAaDlfiKS6imCf1o7HBeV7rgvE0PxH8DHSndILSc5dWBljpTO2FrbDwAXD8UGvC2pOtt3fr2RFaUjZqs3OAn4aekOqeUEgwMjubx0xt3afgAACLisdIPUIHfUkiPXV6Ntbru7ejBuiwovBaZLt0gtaGRgNBvy2O5d1REDQDoAqEMlnLxuONpuhWtseXyVoCUvfJIKC5J/7R/Nl5UO6YwBoML/lm6Q6i2TC7ecU29LvY/iLOALpTukFlSJ5L8Wj+Rzi0aU3Hm9TCyPHwDfK90h1dHP+xbx2tIR87H6yJjpqfAK4FelW6QW1FuBtUvPyieUCuiIAWCLNaUDpDqpBRy7+pRo+6ddrlke12XS8rdElQrZo9bDxNJz8kEldt4xA0DA2tINUl0Ebx0bivWlM+plYjjWELy3dIfUkpJH5iYuWlzN+zV71x0zAIwN8k386JHa3/9uOXfeUWobeSOeppO2K+Hp0cf5zd5vxwwAW26P6iqA2lfw654Zjll9ZMyUTqm3ddW4s1LjSOCu0i1SKwo4un8kX9/MfXbMALDlHMqjS3dIc1bjhDVnxLWlMxpl7Yr4bgZDpTukVhVwXv/K/Ism7q/NZcbAKo4heTuwb+kcaU6C944PRudfLJcZA6OMA4tLp0gt6sas8NSJ5XF9o3fU1isAi1fmY/tH+TzJf+HBX+3r+1vOkXe+iKws4NXADaVTpBZ1QNT46LILs6fRO2rLAWBZNXuXjGS1ElwR8JzSPdI8TEaNl6+rxp2lQ5pl7Wlxc1Y4DqiVbpFa1LOnr2a40Ttpu1MAi9+Wj6ws4CPAn5VukeYrgzdODMY7SneUMDCa55CcWrpDalGbCJ4zPhhfbtQO2moFYGA0j60s4P/w4K/O8MmJ5byzdEQp++/NMJsf5y3p3haQ/H8vHMm9G7WDthgAlo3mngMr86NbzvXfv3SPVAc3VhZw3JaPr3alC06K6ZkejgF+W7pFalEP64F3N2rjLT8ADKzMZ0zBtwiKPzlJqpNawHFrT4ubS4eUdtHp8aNMmvrZZ6mdBLy8f2W+qBHbbukBYMlIvpzg8ySPLN0i1U1w3thQfLp0RquYGI7/IvlI6Q6pZQXvWbYy96v3ZltyAFh2YfYMjORowkeA3Ur3SPUSwTd7N7KidEer6a3wtwQ/Kd0htaKA/SaD8xqw3dbSvyofEDU+BPSXbpHq7I4tN/j4QemQVrR4JJ9egS8BC0u3SK0okqVjwzFWr+211ArAEWfnH0WNr+LBXx0o4PUe/Hds3VB8DXhr6Q6pVWXwL8uqWbcL4VtmAFgykk+tzPAl4LGlW6S6C/57bCjeXzqj1R00yUjA50p3SC3qoVO99TuF2BIDwMDKfFbC5wLqfpGD1AJ+vinp/Pv810G1GrVNMxwL/Kp0i9SSglOWrsrH1WNTxQeAgZV5OMGngD1Kt0gNsIngZRcPxYbSIe3iojPiF8AJpTukFtVbS/6lHhsqOgAMjORLCcbwSn91qAze2shbeXaq8aFYC7yndIfUkpL/1z+Sy+a7mWIDwMDKPB74MF7xqw6VcGnfoxgp3dGuevs4BbiydIfUiiIZWVbN3vlso8gA0L8yX0RwAdDwxx1KRQS/XjDDcauPjJnSKe1q9SlxVy14KXBX6Rap5QQHTi7itfPZRNMHgP5V+fwIPgIsaPa+paZJXrPmjLi2dEa7WzcYV0awvHSH1IoiOWPZaO451/c3dQAYGM0/jxprgb5m7ldqquT88aH4WOmMTjG2nHcBE6U7pBa071SN0+f65qYNAItH8ukklwC7N2ufUgFX1aY4pXRER4nI2kJeBVxfOkVqOcEbDz87D5jLW5syACxdmX9cgUvwo37qbBuzxsvXVePO0iGdZt2pcUvUOBaolW6RWsz9Fsxw6lze2PAB4LBq7lEL1gAPbPS+pJIiOH1iRfxf6Y5ONbYiPpvBuaU7pFYT8Jql5+SDdvV9DR0All2YPb19fAT4k0buRyot4ZIt56rVQLdvfpLiV0p3SC1m99o0f7+rb2roADB5DecCL2zkPqQWcBM1jiciS4d0uvXV2BQ9HA3cXrpFainBG5atzF26nX7DBoD+kXxlJG9s1PalFlEDjp5YETeVDukWY6fH1ZG8vnSH1GJ2n6rs2n0BohEVS1fmM2vBemBedymSWl0GZ08Mhp9TL2BgJD8EvKJ0h9RCbpzanUdccnJMzubFdV8BWFLNvWqbb/TjwV+d7ht9G3lz6Yhu1TvJa4Aflu6QWsgBfXfw8tm+uO4DQK2PfwUeUe/tSi3mt5XkqNXVmCod0q1WV+O3WeEVgH8G0hYJp5A5q9X9ug4AS1bmq4LZTx9S2wpet3Y4/OmzsInl8fWEaukOqYU8sX8lh8zmhXUbAPpH8tEZ/FO9tie1qkwuHB+MD5Tu0GYHT7KK4LOlO6RWUZnlxYB1GQAOe2f2RbAaeEA9tie1qoRrpqc4oXSHfq9ajdrMJo4DbindIrWChIHZfCSwLgPAwjtYQfKUemxLamGbepKjL6mGn0FvMRedEb8gOQ7wXgwS9E4Hx97Xi+Y9APSvyscEc38akdQuEv5h7XBcVrpD2zc+HJ8A/q10h9QKEk64r4sB5zUAVKtZoca/4+N91emCzx88yarSGdq53j5OBb5bukNqAY/pH+HPd/aCeQ0A31rECQF/OZ9tSG1gQw3+ploNn0TX4lafEnfVgpcBd5VukUoLOGZn35/zAHD42XkAychc3y+1i1pw/LrB+FnpDs3OusG4Eub2eFSpowQvPvH8XLijb895AFi4iX8C9p7r+6V2kMm/rRuM8dId2jXjg/xbgH9u6nb73rSB5+7om3MaAAZW5jMIXjr3JqktXNW3iDeVjtAcROQ0HA+4cqNut8Nj9ZwGgAzOpUEPEpJaxMZKcNTqU8JzyW3q4qHYkMExwEzpFqmgpYe9M7d7of4uDwBLVuYSL/xTF3jT2sH4dukIzc/EYHwh4OzSHVIxyV4L7+CvtvetXRoAll2YPRmcVZ8qqWV9YnzQz5N3il9P8g+A929Q16rAC3fw9dmbvJoTgMfXpUhqTb+oLeQ4IryjXIdYX41NC+BowDs4qislLN7e12c9ACw7L3cL+If6JUktp1aDY9edGt5TvsN8fCiuSfjb0h1SIQ9fPJp/su0XZz0ATE1yPPAHdU2SWkjAqnVD8bnSHWqMiaH4MPDB0h1SCT21e58GmNUAsOzC7CE5pf5JUotIvvqgfXhL6Qw1VlZ4HfDj0h1S0wV/ve2XZjUATF3NSwgOrH+R1BJ+W4FjLjgppkuHqLEmlsdvAl4GTJVukZop4ZnbfhxwtqcATmtAj9QSMnjt2uH4YekONcfYUHwDr2dS99mt97f86dZfuM8BYGAknwc8tWFJUlkfnBiMD5WOUHMdNMk5wGdKd0jNlBWes/XvZ7MC4K1Q1ZmSq7ecE1aXqVajlhWOS/hl6RapWQIO2fr3Ox0AFr8tHwkc2sggqZDp6OGoieXxm9IhKmNieVzfk7wS8J4P6g7JMw+p5oK7f7vTASAWcPx9vUZqU28eWx5fLR2hstYOx0UB7y7dITXJ/fZexO/uB7DDg3u1mpWA45rTJDVPwqW9B3Ju6Q61hsndOTXB5z6oK2SNp9396x3PzpV3AAARIUlEQVQOAN/s41DgD5tSJDXPLVQ4avWR4RPiBMAlJ8dkJEcBd5ZukRqtttVF/TscACrwyubkSE2TteDVE8vj+tIhai3jw3FVesGzukDA07f69b0tPjf3rUxzHbDdZwhL7SjgXWND8YbSHWpdAyO5BlhaukNqoMneSfZYXY2p7a4AVDbxYjz4q7NcubCP00tHqLVtglcBPyvdITVQ31Qvj4YdnALIZKC5PVJDbcwaR60+Je4qHaLWdvFQbCA5GvAaEXWshMfCdgaAZdW8f8BfNT9JaoyEv59YEf9XukPtYXw4/hcYLd0hNUpUdjAATC/icGBR04ukxrh4YpDzS0eovdw2SRX4cukOqSGSx8B2BoCsufyvjvGLSnIcEd7pTbtkfTU2McPLgA2lW6R6C3gcbDMAnHh+LiQ4rEySVFe1gKPXDsevSoeoPY2fET8PfFaEOk8mB8I2A8CNt/CXwN5FiqT6GhkbivWlI9Texobio8D7S3dIdRXsc+g5ufs9BoCIez4pSGpHAV/bfx/eWrpDneGuBbwe+EHpDqme+qZ52D2vAQieXahFqpffburhFRecFNOlQ9QZPn1a3BHwCmCqdItUL9Gz1QCwrJq9wJ8W7JHmLeE1F50ePyrdoc4yNhTfSDijdIdUN7WtBoCpRTwNuF/BHGleAv5rYig+XLpDnengSd4eyf+U7pDqIYKH/m4AyOQ5JWOkeUmunpzk5NIZ6lzVatRiIUcDN5ZukeYrkn22vgbgWcVKpPmZBl5xSTVuLx2izrb2tLg54XjAe0uorSVbDQCRPKNkjDRXCSvGh+Py0h3qDhND8cmAd5bukOYjYe8KQP+qfDDBPqWDpDlYf/Akby8doe4yuTvLCa4o3SHNVdw9AAB/UrREmpvbssIrqtWolQ5Rd7nk5JiswdH40UC1r80DQGXGAUBtKFgxsTyuL52h7rRuMK4kOa90hzRH968A1Co8oXSJtItuvm0j7ysdoe5W6+XtwF2lO6Q5WFgBiHQFQO0l4YPrq7GxdIe627pT45aAi0p3SLss6auQGXgNgNpMBT5dukECqHlzILWjoLfSv5IHAQ8o3SLtik0zXFm6QdriqtIB0hz0Vqjw4NIV0q767SZuKt0gARD+u6i2tKBCOACo/fzxHxClGySATBaUbpDmYFMl4KGlK6RddcsvHVzVGqKHh5VukOZgspLJAaUrpF21qcKTSzdIAJUaTyrdIM3BVAX8SUrtJ4LDSjdIABm8sHSDNAdTlYCHlK6Q5uCow6q5R+kIdbf+kXw0Pkpd7WmyAj4ESG1pj4WLOLl0hLreW4DKfb5Kaj0bK8Ci0hXSXEQytHhlPrZ0h7pT/0i+IOAVpTukOdpQAXYrXSHN0f0qwZqlK/OBpUPUXfpX5WMCPgR+HFXtKeFXrgCo3T2uFnzuRavSj7OqKRaflQdHjfWAg6faVsCtrgCoEzxppsYVA6N51JZnW0h1t6yavUtG8k2VCl8CPz6ttverGBjJXwN7li6R6iK4guS9MzOMX3RG/KJ0jtpf/0g+OoKXACeSPLJ0j1QPGbw5BkZyEugtHSM1wPUk1xHcXjpkawFfGhuKaumOVjKwMt9F8JjSHfeQ7EXwCGDf0ilS3QWvWQDex1od68Gt+KyLhN+UbmhBTwf+tHTEPXgySR0sk2srwHTpEEmS1Dw9lc0DwFTpEEmS1Dx3VPiZA4AkSV0k4ZefPi3ucACQJKmLRHItQCXhrtIxkiSpSYKrASoBG0q3SJKk5sjgu7D5KVa/KtwiSZKaJJIrYfMpAAcASZK6xEzPlhWASG4tHSNJkppi426P4BqASgS3lK6RJElN8b3VR8YMbD4FcF3pGkmS1HgJX7v715WsbP48oCRJ6niX3/2LSs+MA4AkSd0gkq/c/evKhil+BmTBHkmS1GjBrw+a4vt3/7ayvhobgZsKJkmSpAaLGl+rVqN29+8rW/73+zt4vSRJ6gTBl7f+7eYBYMtdgSRJUmfK5LNb/74CEBUHAEmSOthv9n/g7y8AhC0DQNY23xZQkiR1noRLLzgpprf+WgWgd5ErAJIkdazgM9t+qQKw+pS4Ndl8b2BJktRZosb/bPu1yu++mfc8NyBJkjrCT8eH46ptv1jZ6teXb/tNSZLU3iJYs72vOwBIktTBAtZu7+u/GwCm7s8VwGTTiiRJUqPd9OSN97wB0N1+NwBccnJMApc1LUmSJDVWMrb17X+3Vtnm9/f6mIAkSWpPOzr/D9sOAOkAIElSh7h+4YH3vP3v1u4xAPQ+mq8DGxqeJEmSGiqDD60+MmZ29P17DABbXri+0VGSJKmxemb44M6+v+01AJCsa1iNJElqhm+sXRE7fc7PvQaAWi/rgB0uGUiSpBaXfOC+XnKvAWDdqXEL8L8NCZIkSY12Z+8iPnRfL7r3KQAgg7H690iSpIZLPrj6lLj1vl623QFgwSbGgKx7lCRJaqwK757dy7ZjzRlxbcKX6lskSZIabP34YHxnNi/c7gCw5Rs7/fiAJElqLZn8y2xfu8MBgEkuBDbWI0iSJDVWwjW3TzEx29fvcAAYq8avA+8JIElSO4jg7PXV2DTb1+94BQDI5P3zLpIkSY12/dT9du2YvdMB4KApPknwk3klSZKkhsrk7ZecHJO78p6dDgDVatRIzp9fliRJapjk1r4pLtjVt+10AACoLeR9eDGgJEmtqcLbV1fjt7v+tvuw5dbAF84pSpIkNdINd/Xwjrm88T4HAICAd85l45IkqXES/vHTp8Udc3nvrAaAsaH4BvCZuexAkiTVX8CPDtiH9831/bMaAACixuhcdyJJkuqrBisuOCmm5/r+WQ8AYyviswFfm+uOJElS3XxlYpD/ns8GZj0AANTSVQBJkgqrBbyeiHk9tXeXBoCJIdYC35rPDiVJ0jwk791ybd687NIAQERm8Ob57lSSJM3JhlovZ9RjQ7s2AAATg3FxwqX12LkkSdolZ2y5P8+87fIAAEDwD/XYuSRJmrXLew+s3+355zQATAzGFxIuqleEJEnaqUmSV64+MmbqtcG5rQAAlR7eCOzSk4ckSdIcBP84PhxX1XOTcx4Axk6Pqwn+pZ4xkiRpG8EV++/NOfXe7JwHAICpjbwNuKlOLZIk6Z6mKvA387nj347MawC4pBq3kwzVK0aSJP1eJG9eOxjfbsS25zUAAIwP8X6Cz9YjRpIkbZZw6VOmOLdR25/3AEBEzlR4LXDX/HMkSRJwCxWOqlaj1qgdzH8AAC46PX5EcGY9tiVJUpfLTF41sTyub+RO6jIAAOy/N+ckNOQ8hSRJ3SKDd0wMx0Sj91O3AeCCk2K6p8bRwMZ6bVOSpC7zpb6NLG/Gjuo2AACsXRHfTbxNsCRJc3BDT41lq6sx1Yyd1XUAADh4krcHfK7e25UkqYNNRoUla1bEDc3aYd0HgGo1ajnD3wAb6r1tSZI6USSvG1seX23mPus+AACMnxE/B14FZCO2L0lSxwjOHRuO9zV7tw0ZAADGh2ItNO4GBpIkdYCPH9Ski/621bABAOC2SYYTLm3kPiRJakvJ12uTHNvIm/3sTEMHgPXV2ESNlwINvZmBJEltJfhJJkesq8adpRIaOgAATKyImzI5Ephs9L4kSWoDN2Ry6MSKKPo03YYPAAATw/GlCI7FiwIlSd3tllrw/Imh+HHpkKYMAABjg3FhJGc1a3+SJLWY27PCYesG48rSIdDEAQBgbIh/SPhoM/cpSVILuDODxRPL4+ulQ+7W1AGAiOzr41V+MkCS1EV+W0kOnxiML5QO2VpzBwBg9Slx1/Qk/RF8s9n7liSpyW6rJIeuHY6W+8G36QMAwCXVuH1hjRcAPyixf0mSmmBDVDh07XBcVjpke4oMAACrh+OXAS8ArivVIElSg9xE8Jxm399/VxQbAADGhuKnAc8CflqyQ5Kkekm4ppI8e3wwvlO6ZWeKDgCweQjomeEQgp+UbpEkaZ4u71nAM9cOxw9Lh9yX4gMAwJoz4tqeTfxVwjWlWyRJmpNgrDbJc9eeFjeXTpmNlhgAYPMQsGCG5wItPzVJkrS1gHcctJEXl7y3/65qmQEANg8BvX08E/hy6RZJkmZhEjhhbCjeWOqpfnPVUgMAwOpT4ta7FnBowiWlWyRJ2onraxUOGR+Kfy8dMhctNwAAfPq0uOOAfRgAPli6RZKk7fjSdA9PXbc8vlI6ZK5acgAAuOCkmB4f5DiCIaCtllUkSR0rM/jn3kme+4nT48bSMfOxoHTATkXkOIwuGc1vZ/JRYM/SSZKkrnVLJTl+7VBcVDqkHlp2BWBrY4NxCcGzvFeAJKmI4LM9NZ60drgzDv7QJgMAwPhgfGdT8lSCsdItkqSuMQkMHrSRQ9esiBtKx9RTa58C2MbFQ7EBWLpkJE9M+Begt3STJKlDBVfEDMePrYgrxku3NEDbrABsbWwoLiB5Nj5DQJJUf3clnN77KJ42tiKuKB3TKG05AACMD8flU5M8OYP3lW6RJHWML2SFgyaG4pzVR8ZM6ZhGaqtTANu6pBq3A68eGM3VJO8DHlK6SZLUlm4gGBxfzgeJyNIxzdC2KwBbGx+MT/X28STgw6VbJEltZTrh7VnhMeOD8YFuOfhDm68AbG31KXErcPSSs/I/s8K/An9cukmS1LoSLump8Ka1y+N7pVtK6IgVgK2NrYjP7r8PT8jgjcAdpXskSS0m+WrWeO7EUBzerQd/6KAVgK1dcFJMA+948Uium05GIlgGROkuSVJR3wNWjA8x1k1L/TvScSsAW/v4UFwzMRwvJXkm8IXSPZKkIr6bwTG9B/LE8aFY68F/s45cAdjW+HBcDjynf2X2R3Am8MTSTZKkhrssk9GJIdZ50L+3jl4B2NbEcEyMD/LkSJaSfL10jySp7moJF1WSQ8aH4s8nhmPCg//2dcUKwD1E5BiMAWP9I/mCgGHgWaWzJEnzcksG/5HTvGfdm8MHx81C9w0AW5kYik8Cn1x8Vh5cqfAG4GXAosJZkqTZ+zLB+bdt5ML11dhYOqaddPUAcLd1K+KbwPGLz83TYpoTAk4EHlE4S5K0fT9O+BDw4Ymh+HHpmHblALCVdafGLcAImaP9q3gWcGwkLwH2LJwmSd3uFwFrZyp8eN3y+ErpmE7gALA9ETmx+WODX1h2Xr5hapJ+gpeQvAC4f+k8SeoGCd+uJOtqPYxPnM43vJivvhwA7sPqU+Iu4GPAxw57Z/b13clzs8YAwWLgwYXzJKmT3BxwacL6gE+MD8VPf/ed5eWiOpUDwC645OSYBC7Z8s9rBlbm4wkOyeQ5ERwCPKhooCS1l58TXJ7JpRl8ft1yrvKn/OZxAJiH8eG4CrgK+FcyY+nZPHYmeWokByccHPAUvH5AkhK4luCKhG9U4BvRwzfWnhY33+NVg2XiupUDQL1E5NrN95n+HpuvToXMWHIOj8oajwYeTXIgcCDw6IT9AvbFZxRI6gy3AdcT3BjJTzL4Udb4YVT40W0b+ZEf0Ws9DgCNtPmmQ1ez+Z9PbfvtZRdmzx0/Zb++afadgf2iQk/zI9VsWePm+35Vd4ke3pA19ijdoV2TyV0Lgxsqfdyw5XopSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSVK7+P8BcvySTgikVcEAAAAASUVORK5CYII="/>
+</defs>
+</svg>

package/src/RedactoPrivacyCenter/components/ActivitiesList.tsx

@@ -0,0 +1,272 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AdvancedTable, AdvancedTablePagination } from '../table';
+import { pcStyles } from '../styles/pcStyles';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { fetchActivities } from '../lib/api';
+import { useOrganization } from '../context/OrganizationContext';
+import { useAuth } from '../context/AuthContext';
+import { useBaseUrl } from '../context/BaseUrlContext';
+import type { Activity } from '../lib/types';
+import { useActivitiesColumns } from './activitiesColumns';
+import { useCurrentLanguage } from '../lib/useCurrentLanguage';
+import { toast } from '../utils/toast';
+
+export default function ActivitiesList({
+  variant,
+}: {
+  variant?: 'modern' | 'minimal';
+}) {
+  const { t } = useTranslation();
+  const { organization } = useOrganization();
+  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
+  const { consentClient } = useBaseUrl();
+  const organizationId = organization?.uuid;
+  const workspaceId = organization?.workspaces[0]?.uuid;
+
+  // Create auth context object for API calls - memoized to prevent infinite loops
+  const authContext = useMemo(() => ({
+    accessToken,
+    refreshToken,
+    onError,
+    updateTokens,
+  }), [accessToken, refreshToken, onError, updateTokens]);
+
+  // Track language changes for localized API calls
+  const { langParam } = useCurrentLanguage();
+
+  const [activityData, setActivityData] = useState<Activity[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  // Preserve previous data during loading to prevent pagination from disappearing
+  const [previousData, setPreviousData] = useState<Activity[]>([]);
+  const [previousTotalCount, setPreviousTotalCount] = useState(0);
+
+  const columns = useActivitiesColumns();
+
+  const handleGetActivities = useCallback(
+    async (page: number = currentPage, size: number = pageSize) => {
+      setIsLoading(true);
+      try {
+        if (organizationId && workspaceId) {
+          const offset = (page - 1) * size;
+          const response = await fetchActivities(
+            organizationId,
+            workspaceId,
+            offset,
+            size,
+            authContext,
+            consentClient,
+            langParam
+          );
+          if (!response) {
+            throw new Error('Failed to fetch activity data');
+          }
+          setActivityData(response.data ?? []);
+          setTotalCount(response.pagination?.total_count ?? 0);
+          if (page !== currentPage) setCurrentPage(page);
+          if (size !== pageSize) setPageSize(size);
+        }
+      } catch (error) {
+        console.error(error);
+        setActivityData([]);
+        setTotalCount(0);
+        setPreviousData([]);
+        setPreviousTotalCount(0);
+        toast.error(t('failedToFetchActivityData'));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [organizationId, workspaceId, currentPage, pageSize, authContext, consentClient, langParam]
+  );
+
+  // Preserve previous data when starting to load new page
+  useEffect(() => {
+    if (activityData.length > 0) {
+      setPreviousData(activityData);
+      setPreviousTotalCount(totalCount);
+    }
+  }, [activityData, totalCount]);
+
+  useEffect(() => {
+    void handleGetActivities();
+  }, [organizationId, workspaceId, handleGetActivities]);
+
+  // Use previous data during loading to maintain pagination visibility
+  const displayData = isLoading && activityData.length === 0 ? previousData : activityData;
+  const displayTotalCount = isLoading && totalCount === 0 ? previousTotalCount : totalCount;
+
+  const table = useReactTable<Activity>({
+    data: displayData,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(displayTotalCount / pageSize) || 0,
+    state: {
+      pagination: {
+        pageIndex: currentPage - 1,
+        pageSize: pageSize,
+      },
+    },
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === 'function'
+          ? updater({ pageIndex: currentPage - 1, pageSize })
+          : updater;
+      const nextPage = (next as any).pageIndex + 1;
+      const nextSize = (next as any).pageSize;
+      if (nextPage === currentPage && nextSize === pageSize) return;
+      setCurrentPage(nextPage);
+      setPageSize(nextSize);
+      void handleGetActivities(nextPage, nextSize);
+    },
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      {isLoading ? (
+        <ActivitiesTableSkeleton
+          labels={[t('activity'), t('activityType'), t('activityDescription'), t('timestamp')]}
+        />
+      ) : (
+        <AdvancedTable table={table} variant={variant} isLoading={false} />
+      )}
+
+      {/* Always show pagination, even during loading */}
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyBetween,
+        ...pcStyles.gapSm,
+        marginTop: '0.25rem',
+      }} className="pc-flex-responsive">
+        <AdvancedTablePagination table={table} />
+      </div>
+    </div>
+  );
+}
+
+// Skeleton loader for Activities table
+function ActivitiesTableSkeleton({ labels }: { labels: string[] }) {
+  const getVar = (varName: string): string => `var(${varName})`;
+
+  return (
+    <div style={{
+      borderRadius: getVar('--pc-border-radius-md'),
+      border: `1px solid ${getVar('--pc-border-color')}`,
+      backgroundColor: getVar('--pc-bg-primary'),
+    }}>
+      {/* Table Header */}
+      <div style={{
+        borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+        backgroundColor: getVar('--pc-bg-secondary'),
+      }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: getVar('--pc-spacing-sm'),
+          paddingLeft: getVar('--pc-spacing-md'),
+          paddingRight: getVar('--pc-spacing-md'),
+          paddingTop: '0.625rem',
+          paddingBottom: '0.625rem',
+        }}>
+          {labels.map((_, i) => (
+            <div
+              key={i}
+              style={{
+                height: '1rem',
+                width: '6rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: getVar('--pc-border-radius-md'),
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Table Rows */}
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div
+          key={index}
+          style={{
+            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+            backgroundColor: getVar('--pc-bg-primary'),
+          }}
+        >
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: getVar('--pc-spacing-sm'),
+            paddingLeft: getVar('--pc-spacing-md'),
+            paddingRight: getVar('--pc-spacing-md'),
+            paddingTop: '0.625rem',
+            paddingBottom: '0.625rem',
+          }}>
+            {/* Activity Title */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
+              <div style={{
+                height: '1rem',
+                width: '8rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: getVar('--pc-border-radius-md'),
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Activity Type */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+              <div style={{
+                height: '1.5rem',
+                width: '5rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: '9999px',
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Description */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
+              <div style={{
+                height: '0.75rem',
+                width: '10rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: getVar('--pc-border-radius-md'),
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+              <div style={{
+                height: '0.75rem',
+                width: '8rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: getVar('--pc-border-radius-md'),
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+
+            {/* Timestamp */}
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
+              <div style={{
+                height: '1rem',
+                width: '6rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: getVar('--pc-border-radius-md'),
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+              <div style={{
+                height: '0.75rem',
+                width: '5rem',
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                borderRadius: getVar('--pc-border-radius-md'),
+                backgroundColor: getVar('--pc-bg-tertiary'),
+              }} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/CaseDetails/AttachmentCard.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import { IoDocumentText } from 'react-icons/io5';
+import type { AttachmentCardProps } from '../../lib/types';
+import { formatFileSize, getDownloadUrl } from './utils';
+
+export const AttachmentCard = ({ doc }: AttachmentCardProps) => {
+  const { t } = useTranslation();
+  const downloadUrl = getDownloadUrl(doc.file_url);
+  const fileName = doc.file_name || t('document');
+
+  const content = (
+    <>
+      <IoDocumentText size={20} className="pc-attachment-icon" />
+      <div className="pc-attachment-info">
+        <div className="pc-attachment-name">{fileName}</div>
+        <div className="pc-attachment-size">
+          {doc.file_size ? formatFileSize(doc.file_size) : ''}
+        </div>
+      </div>
+    </>
+  );
+
+  if (downloadUrl) {
+    return (
+      <a
+        href={downloadUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={t('downloadAttachment', { fileName })}
+        className="pc-attachment-card"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return <div className="pc-attachment-card">{content}</div>;
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/ChatBubble.tsx

@@ -0,0 +1,31 @@
+import type { ChatBubbleProps } from '../../lib/types';
+import { AttachmentCard } from './AttachmentCard';
+
+export const ChatBubble = ({
+  message,
+  isPrincipal,
+  senderLabel,
+  timestamp,
+}: ChatBubbleProps) => {
+  const direction = isPrincipal ? 'sent' : 'received';
+
+  return (
+    <div className={`pc-chat-bubble-wrap pc-chat-bubble-wrap--${direction}`}>
+      <span className="pc-chat-sender">
+        {senderLabel} · {timestamp}
+      </span>
+
+      {/* Text bubble */}
+      {message.body && (
+        <div className={`pc-chat-bubble pc-chat-bubble--${direction}`}>
+          {message.body}
+        </div>
+      )}
+
+      {/* Attachment cards */}
+      {message.documents.map((doc) => (
+        <AttachmentCard key={doc.uuid} doc={doc} />
+      ))}
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/DocumentRequestCard.tsx

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { IoAttach } from 'react-icons/io5';
+import { PCButton, PCLoader } from '../../ui';
+import type { DocumentRequestCardProps } from '../../lib/types';
+import { UPLOAD_ACTIVE_STATUSES, DOCUMENT_REQUEST_STATUS_LABEL, STATUS_COLORS } from '../../lib/constants';
+
+export const DocumentRequestCard = ({
+  message,
+  onUpload,
+  isSubmitting,
+}: DocumentRequestCardProps) => {
+  const { t } = useTranslation();
+  const meta = message.document_request_metadata;
+  if (!meta) return null;
+
+  const canUpload = UPLOAD_ACTIVE_STATUSES.includes(meta.document_request_status);
+  const statusInfo = DOCUMENT_REQUEST_STATUS_LABEL[meta.document_request_status];
+
+  return (
+    <div
+      className="pc-doc-request-card"
+      style={{
+        border: `1.5px dashed ${STATUS_COLORS.info.border}`,
+        backgroundColor: STATUS_COLORS.info.bg,
+      }}
+    >
+      <div className="pc-doc-request-header">
+        <IoAttach size={16} className="pc-doc-request-icon" style={{ color: STATUS_COLORS.info.color }} />
+        <div>
+          <div className="pc-doc-request-title" style={{ color: STATUS_COLORS.infoDark }}>
+            {t('documentRequestedLabel', { title: meta.title })}
+          </div>
+          {meta.accepted_document && (
+            <div className="pc-doc-request-accepted" style={{ color: STATUS_COLORS.info.color }}>
+              {t('acceptedLabel', { accepted: meta.accepted_document })}
+            </div>
+          )}
+        </div>
+
+        <span
+          className="pc-doc-request-status"
+          style={{ color: statusInfo.color, border: `1px solid ${statusInfo.color}` }}
+        >
+          {t(statusInfo.labelKey)}
+        </span>
+      </div>
+
+      {canUpload && (
+        <PCButton
+          variant="outline"
+          size="sm"
+          disabled={isSubmitting}
+          onClick={() => onUpload(message.uuid)}
+          className="pc-doc-request-upload-btn"
+        >
+          {isSubmitting
+            ? <PCLoader variant="spinner" size="sm" />
+            : <IoAttach size={14} />}
+          {t('uploadAndSubmit')}
+        </PCButton>
+      )}
+
+      {meta.document_request_status === 'rejected' && meta.rejection_reason && (
+        <div
+          className="pc-doc-request-rejection"
+          style={{ color: STATUS_COLORS.error.color, backgroundColor: STATUS_COLORS.error.bg }}
+        >
+          {t('rejectionReasonLabel', { reason: meta.rejection_reason })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/MessageComposer.tsx

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next';
+import { IoAttach, IoSend, IoDocumentText } from 'react-icons/io5';
+import { PCButton, PCLoader } from '../../ui';
+import type { MessageComposerProps } from '../../lib/types';
+import { formatFileSize } from './utils';
+
+export const MessageComposer = ({
+  messageText,
+  onMessageTextChange,
+  pendingUpload,
+  onRemovePendingUpload,
+  onAttachClick,
+  onSend,
+  isSending,
+  isUploading,
+}: MessageComposerProps) => {
+  const { t } = useTranslation();
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+
+  return (
+    <div className="pc-composer">
+      {pendingUpload && (
+        <div className="pc-composer-pending-row">
+          <div className="pc-composer-pending-pill">
+            <IoDocumentText size={14} />
+            <span>{pendingUpload.file_name}</span>
+            <span className="pc-composer-pending-size">
+              {formatFileSize(pendingUpload.file_size)}
+            </span>
+            <button
+              type="button"
+              aria-label={t('removeAttachment')}
+              onClick={onRemovePendingUpload}
+              className="pc-composer-remove-btn"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="pc-composer-textarea-wrap">
+        <textarea
+          value={messageText}
+          onChange={(e) => onMessageTextChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('writeMessagePlaceholder')}
+          rows={3}
+          className="pc-composer-textarea"
+        />
+      </div>
+      <div className="pc-composer-actions">
+        <PCButton
+          variant="outline"
+          size="sm"
+          disabled={isUploading || isSending}
+          onClick={onAttachClick}
+          className="pc-composer-btn"
+        >
+          {isUploading
+            ? <PCLoader variant="spinner" size="sm" />
+            : <IoAttach size={16} />}
+          {t('attachFile')}
+        </PCButton>
+        <PCButton
+          size="sm"
+          disabled={(!messageText.trim() && !pendingUpload) || isSending || isUploading}
+          onClick={onSend}
+          className="pc-composer-btn"
+        >
+          {isSending ? <PCLoader variant="spinner" size="sm" /> : null}
+          {t('send')}
+          <IoSend size={14} />
+        </PCButton>
+      </div>
+      <div className="pc-composer-footer">
+        {t('messagesSecureFooter')}
+      </div>
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/components/CaseDetails/MessageItem.tsx

@@ -0,0 +1,95 @@
+import { useTranslation } from 'react-i18next';
+import {
+  IoCheckmarkCircle, IoCloseCircle, IoAlertCircle,
+} from 'react-icons/io5';
+import type { MessageItemProps } from '../../lib/types';
+import { STATUS_COLORS } from '../../lib/constants';
+import { formatMessageTime } from './utils';
+import { DocumentRequestCard } from './DocumentRequestCard';
+import { StatusEvent } from './StatusEvent';
+import { ChatBubble } from './ChatBubble';
+
+export const MessageItem = ({
+  message,
+  onUploadForRequest,
+  isSubmittingForRequest,
+}: MessageItemProps) => {
+  const { t } = useTranslation();
+  const isPrincipal = message.sender_role === 'data_principal';
+  const timestamp = formatMessageTime(message.created_at);
+  const senderLabel = isPrincipal ? t('senderYou') : message.triggered_by_email || t('senderPrivacyTeam');
+
+  switch (message.message_type) {
+    case 'document_requested':
+      return (
+        <>
+          {message.body && (
+            <div className="pc-chat-bubble-wrap pc-chat-bubble-wrap--received">
+              <span className="pc-chat-sender">
+                {senderLabel} · {timestamp}
+              </span>
+              <div className="pc-chat-bubble pc-chat-bubble--received">
+                {message.body}
+              </div>
+            </div>
+          )}
+          <DocumentRequestCard
+            message={message}
+            onUpload={onUploadForRequest}
+            isSubmitting={isSubmittingForRequest}
+          />
+        </>
+      );
+
+    case 'document_approved':
+      return (
+        <StatusEvent
+          icon={<IoCheckmarkCircle size={18} />}
+          color={STATUS_COLORS.success.color}
+          bgColor={STATUS_COLORS.success.bg}
+          borderColor={STATUS_COLORS.success.border}
+          text={t('documentAccepted')}
+          timestamp={timestamp}
+        />
+      );
+
+    case 'document_rejected':
+      return (
+        <StatusEvent
+          icon={<IoCloseCircle size={18} />}
+          color={STATUS_COLORS.error.color}
+          bgColor={STATUS_COLORS.error.bg}
+          borderColor={STATUS_COLORS.error.border}
+          text={t('documentRejected')}
+          subText={message.document_request_metadata?.rejection_reason}
+          timestamp={timestamp}
+        />
+      );
+
+    case 'document_replacement_requested':
+      return (
+        <StatusEvent
+          icon={<IoAlertCircle size={18} />}
+          color={STATUS_COLORS.warning.color}
+          bgColor={STATUS_COLORS.warning.bg}
+          borderColor={STATUS_COLORS.warning.border}
+          text={t('replacementRequested')}
+          subText={message.body}
+          timestamp={timestamp}
+        />
+      );
+
+    case 'document_submitted':
+    case 'document_replaced':
+    case 'message_sent':
+    default:
+      return (
+        <ChatBubble
+          message={message}
+          isPrincipal={isPrincipal}
+          senderLabel={senderLabel}
+          timestamp={timestamp}
+        />
+      );
+  }
+};