1 files changed, 50 insertions, 0 deletions
diff --git a/packages/ui/src/components/message-progress.css b/packages/ui/src/components/message-progress.css
new file mode 100644
index 000000000..0b84e0393
--- /dev/null
+++ b/packages/ui/src/components/message-progress.css
@@ -0,0 +1,50 @@
+[data-component="message-progress"] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+[data-component="message-progress"] [data-slot="message-progress-status"] {
+  display: flex;
+  align-items: center;
+  column-gap: 20px;
+  padding-left: 12px;
+  border: 1px solid transparent;
+  color: var(--text-base);
+}
+
+[data-component="message-progress"] [data-slot="message-progress-status-text"] {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+[data-component="message-progress"] [data-slot="message-progress-list-container"] {
+  height: 120px;
+  overflow: hidden;
+  pointer-events: none;
+  padding-bottom: 4px;
+
+  mask-image: linear-gradient(to bottom, transparent 0%, black 33%, black 95%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 33%, black 95%, transparent 100%);
+}
+
+[data-component="message-progress"] [data-slot="message-progress-list"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 8px;
+  padding-top: 32px;
+  padding-bottom: 32px;
+
+  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-component="message-progress"] [data-slot="message-progress-item"] {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}