@stream-io/video-styling 1.10.0 → 1.11.0

package/src/Embedded/shared/Feedback/CallFeedback-layout.scss

@@ -0,0 +1,153 @@
+.str-video__embedded-call-feedback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  width: 100%;
+  padding: var(--str-video__spacing-xl);
+}
+
+.str-video__embedded-call-feedback__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-xl);
+  width: 100%;
+  max-width: 400px;
+  padding: var(--str-video__spacing-xl);
+  font-size: 0.9375rem;
+  text-align: center;
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+  }
+}
+
+.str-video__embedded-call-feedback__rating-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-xl);
+  padding: var(--str-video__spacing-lg) 0;
+}
+
+.str-video__embedded-call-feedback__rating-label {
+  font-size: 1.125rem;
+}
+
+.str-video__embedded-call-feedback__stars {
+  display: flex;
+  gap: var(--str-video__spacing-xxs);
+}
+
+.str-video__embedded-call-feedback__star {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  .str-video__icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.str-video__embedded-call-feedback__textarea {
+  width: 100%;
+  min-height: 72px;
+  padding: var(--str-video__spacing-md);
+  border: 1px solid transparent;
+  border-radius: var(--str-video__border-radius-md);
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: 0.875rem;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: var(--str-video__base-color2);
+  }
+}
+
+.str-video__embedded-call-feedback__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-lg);
+  width: 100%;
+  padding-top: var(--str-video__spacing-lg);
+
+  .str-video__button:disabled {
+    opacity: 0.5;
+  }
+}
+
+.str-video__embedded-call-feedback__ended-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xl);
+  justify-content: center;
+}
+
+.str-video__embedded-call-feedback__ended-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+}
+
+.str-video__embedded-call-feedback__ended-divider {
+  width: 1px;
+  align-self: stretch;
+}
+
+.str-video__embedded-call-feedback__ended-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-sm);
+  height: 44px;
+  padding: 0 var(--str-video__spacing-xl);
+  border: 1px solid transparent;
+  border-radius: var(--str-video__border-radius-circle);
+  background: transparent;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+
+  .str-video__icon {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.str-video__embedded-call-feedback__checkmark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+
+  .str-video__icon {
+    width: 24px;
+    height: 24px;
+  }
+}

package/src/Embedded/shared/Feedback/CallFeedback-theme.scss

@@ -0,0 +1,67 @@
+.str-video__embedded-call-feedback {
+  background: var(--str-video__base-color4);
+  color: var(--str-video__text-color1);
+}
+
+.str-video__embedded-call-feedback__container p {
+  color: var(--str-video__text-color2);
+}
+
+.str-video__embedded-call-feedback__textarea {
+  border-color: var(--str-video__base-color3);
+
+  &::placeholder {
+    color: var(--str-video__text-color3);
+  }
+
+  &:focus {
+    border-color: var(--str-video__base-color2);
+  }
+}
+
+.str-video__embedded-call-feedback__star .str-video__icon {
+  background-color: var(--str-video__text-color3);
+}
+
+.str-video__embedded-call-feedback__star:hover .str-video__icon,
+.str-video__embedded-call-feedback__star--active .str-video__icon {
+  background-color: var(--str-video__button-primary-active);
+}
+
+.str-video__embedded-call-feedback__ended-divider {
+  background: var(--str-video__base-color3);
+}
+
+.str-video__embedded-call-feedback__ended-button {
+  color: var(--str-video__text-color1);
+  border-color: var(--str-video__base-color3);
+
+  .str-video__icon {
+    background-color: var(--str-video__text-color1);
+  }
+
+  &:hover {
+    background: var(--str-video__base-color5);
+    border-color: var(--str-video__base-color2);
+  }
+}
+
+.str-video__embedded-call-feedback__actions .str-video__button {
+  background-color: var(--str-video__button-primary-active);
+
+  &:not([disabled]):hover {
+    background-color: var(--str-video__button-primary-hover);
+  }
+}
+
+.str-video__embedded-call-feedback__checkmark {
+  background: color-mix(
+    in srgb,
+    var(--str-video__alert-success) 15%,
+    transparent
+  );
+
+  .str-video__icon {
+    background-color: var(--str-video__alert-success);
+  }
+}

package/src/Embedded/shared/Feedback/index.scss

@@ -0,0 +1,2 @@
+@use 'CallFeedback-layout';
+@use 'CallFeedback-theme';

package/src/Embedded/shared/Icons.scss

@@ -0,0 +1,62 @@
+:root {
+  --str-video__icon--eye: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDQuNUMxNyA0LjUgMjEuMjcgNy42MSAyMyAxMkMyMS4yNyAxNi4zOSAxNyAxOS41IDEyIDE5LjVDNyAxOS41IDIuNzMgMTYuMzkgMSAxMkMyLjczIDcuNjEgNyA0LjUgMTIgNC41Wk0xMiA2LjVDOS4yNCA2LjUgNyA4Ljc0IDcgMTEuNUM3IDE0LjI2IDkuMjQgMTYuNSAxMiAxNi41QzE0Ljc2IDE2LjUgMTcgMTQuMjYgMTcgMTEuNUMxNyA4Ljc0IDE0Ljc2IDYuNSAxMiA2LjVaTTEyIDguNUMxMy42NiA4LjUgMTUgOS44NCAxNSAxMS41QzE1IDEzLjE2IDEzLjY2IDE0LjUgMTIgMTQuNUMxMC4zNCAxNC41IDkgMTMuMTYgOSAxMS41QzkgOS44NCAxMC4zNCA4LjUgMTIgOC41WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K');
+  --str-video__icon--blur-icon: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQ0OC41IDI3MS41cTE5LjUgMCAzMy43NSAxNC4yNXQxNC4yNSAzMy43NS0xNC4yNSAzMy43NS0zMy43NSAxNC4yNS0zMy43NS0xNC4yNS0xNC4yNS0zMy43NSAxNC4yNS0zMy43NSAzMy43NS0xNC4yNXpNNDQ4LjUgNDAwLjVxMTkuNSAwIDMzLjc1IDE0LjI1dDE0LjI1IDMzLjc1LTE0LjI1IDMzLjc1LTMzLjc1IDE0LjI1LTMzLjc1LTE0LjI1LTE0LjI1LTMzLjc1IDE0LjI1LTMzLjc1IDMzLjc1LTE0LjI1ek0zMTkuNSA1NDQuNXExMy41IDAgMjMuMjUgOXQ5Ljc1IDIyLjUtOS43NSAyMi41LTIzLjI1IDktMjIuNS05LTktMjIuNSA5LTIyLjUgMjIuNS05ek0zMTkuNSAyNzEuNXExOS41IDAgMzMuNzUgMTQuMjV0MTQuMjUgMzMuNzUtMTQuMjUgMzMuNzUtMzMuNzUgMTQuMjUtMzMuNzUtMTQuMjUtMTQuMjUtMzMuNzUgMTQuMjUtMzMuNzUgMzMuNzUtMTQuMjV6TTQ0OC41IDY1NS41cTE1IDAgMTUgMTYuNXQtMTUgMTYuNXEtMTYuNSAwLTE2LjUtMTYuNXQxNi41LTE2LjV6TTQ0OC41IDU0NC41cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjIuNS0yMi41IDktMjMuMjUtOS05Ljc1LTIyLjUgOS43NS0yMi41IDIzLjI1LTl6TTY3MiA0MzJxMTYuNSAwIDE2LjUgMTYuNSAwIDE1LTE2LjUgMTV0LTE2LjUtMTVxMC0xNi41IDE2LjUtMTYuNXpNNTc2IDE2MC41cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjIuNS0yMi41IDktMjIuNS05LTktMjIuNSA5LTIyLjUgMjIuNS05ek01NzYgMjg4cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjMuMjUtMjIuNSA5Ljc1LTIyLjUtOS43NS05LTIzLjI1IDktMjIuNSAyMi41LTl6TTU3NiA1NDQuNXExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMi41IDIyLjUtOXpNNTc2IDQxNS41cTEzLjUgMCAyMi41IDkuNzV0OSAyMy4yNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMy4yNSAyMi41LTkuNzV6TTMxOS41IDQwMC41cTE5LjUgMCAzMy43NSAxNC4yNXQxNC4yNSAzMy43NS0xNC4yNSAzMy43NS0zMy43NSAxNC4yNS0zMy43NS0xNC4yNS0xNC4yNS0zMy43NSAxNC4yNS0zMy43NSAzMy43NS0xNC4yNXpNMzE5LjUgMjIzLjVxLTEzLjUgMC0yMi41LTl0LTktMjIuNSA5LTIyLjUgMjIuNS05IDIzLjI1IDkgOS43NSAyMi41LTkuNzUgMjIuNS0yMy4yNSA5ek0zMTkuNSAxMTIuNXEtMTUgMC0xNS0xNi41dDE1LTE2LjVxMTYuNSAwIDE2LjUgMTYuNXQtMTYuNSAxNi41ek0zMTkuNSA2NTUuNXExNi41IDAgMTYuNSAxNi41dC0xNi41IDE2LjVxLTE1IDAtMTUtMTYuNXQxNS0xNi41ek05NiA0MzJxMTYuNSAwIDE2LjUgMTYuNSAwIDE1LTE2LjUgMTV0LTE2LjUtMTVxMC0xNi41IDE2LjUtMTYuNXpNNDQ4LjUgMTEyLjVxLTE2LjUgMC0xNi41LTE2LjV0MTYuNS0xNi41cTE1IDAgMTUgMTYuNXQtMTUgMTYuNXpNNDQ4LjUgMjIzLjVxLTEzLjUgMC0yMy4yNS05dC05Ljc1LTIyLjUgOS43NS0yMi41IDIzLjI1LTkgMjIuNSA5IDkgMjIuNS05IDIyLjUtMjIuNSA5ek02NzIgMzM2cS0xNi41IDAtMTYuNS0xNi41IDAtMTUgMTYuNS0xNXQxNi41IDE1cTAgMTYuNS0xNi41IDE2LjV6TTE5MiAxNjAuNXExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMi41IDIyLjUtOXpNOTYgMzA0LjVxMTYuNSAwIDE2LjUgMTUgMCAxNi41LTE2LjUgMTYuNXQtMTYuNS0xNi41cTAtMTUgMTYuNS0xNXpNMTkyIDI4OHExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIzLjI1LTIyLjUgOS43NS0yMi41LTkuNzUtOS0yMy4yNSA5LTIyLjUgMjIuNS05ek0xOTIgNTQ0LjVxMTMuNSAwIDIyLjUgOXQ5IDIyLjUtOSAyMi41LTIyLjUgOS0yMi41LTktOS0yMi41IDktMjIuNSAyMi41LTl6TTE5MiA0MTUuNXExMy41IDAgMjIuNSA5Ljc1dDkgMjMuMjUtOSAyMi41LTIyLjUgOS0yMi41LTktOS0yMi41IDktMjMuMjUgMjIuNS05Ljc1eiI+PC9wYXRoPgo8L3N2Zz4K');
+  --str-video__icon--login: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjMgNy44MDA1OUM5LjkxIDguMTkwNTkgOS45MSA4LjgxMDU5IDEwLjMgOS4yMDA1OUwxMi4yIDExLjEwMDZIM0MyLjQ1IDExLjEwMDYgMiAxMS41NTA2IDIgMTIuMTAwNkMyIDEyLjY1MDYgMi40NSAxMy4xMDA2IDMgMTMuMTAwNkgxMi4yTDEwLjMgMTUuMDAwNkM5LjkxIDE1LjM5MDYgOS45MSAxNi4wMTA2IDEwLjMgMTYuNDAwNkMxMC42OSAxNi43OTA2IDExLjMxIDE2Ljc5MDYgMTEuNyAxNi40MDA2TDE1LjI5IDEyLjgxMDZDMTUuNjggMTIuNDIwNiAxNS42OCAxMS43OTA2IDE1LjI5IDExLjQwMDZMMTEuNyA3LjgwMDU5QzExLjMxIDcuNDEwNTkgMTAuNjkgNy40MTA1OSAxMC4zIDcuODAwNTlaTTIwIDE5LjEwMDZIMTNDMTIuNDUgMTkuMTAwNiAxMiAxOS41NTA2IDEyIDIwLjEwMDZDMTIgMjAuNjUwNiAxMi40NSAyMS4xMDA2IDEzIDIxLjEwMDZIMjBDMjEuMSAyMS4xMDA2IDIyIDIwLjIwMDYgMjIgMTkuMTAwNlY1LjEwMDU5QzIyIDQuMDAwNTkgMjEuMSAzLjEwMDU5IDIwIDMuMTAwNTlIMTNDMTIuNDUgMy4xMDA1OSAxMiAzLjU1MDU5IDEyIDQuMTAwNTlDMTIgNC42NTA1OSAxMi40NSA1LjEwMDU5IDEzIDUuMTAwNTlIMjBWMTkuMTAwNloiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
+  --str-video__icon--participants: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2IDExQzE3LjY2IDExIDE4Ljk5IDkuNjYgMTguOTkgOEMxOC45OSA2LjM0IDE3LjY2IDUgMTYgNUMxNC4zNCA1IDEzIDYuMzQgMTMgOEMxMyA5LjY2IDE0LjM0IDExIDE2IDExWk04IDExQzkuNjYgMTEgMTAuOTkgOS42NiAxMC45OSA4QzEwLjk5IDYuMzQgOS42NiA1IDggNUM2LjM0IDUgNSA2LjM0IDUgOEM1IDkuNjYgNi4zNCAxMSA4IDExWk04IDEzQzUuNjcgMTMgMSAxNC4xNyAxIDE2LjVWMThDMSAxOC41NSAxLjQ1IDE5IDIgMTlIMTRDMTQuNTUgMTkgMTUgMTguNTUgMTUgMThWMTYuNUMxNSAxNC4xNyAxMC4zMyAxMyA4IDEzWk0xNiAxM0MxNS43MSAxMyAxNS4zOCAxMy4wMiAxNS4wMyAxMy4wNUMxNS4wNSAxMy4wNiAxNS4wNiAxMy4wOCAxNS4wNyAxMy4wOUMxNi4yMSAxMy45MiAxNyAxNS4wMyAxNyAxNi41VjE4QzE3IDE4LjM1IDE2LjkzIDE4LjY5IDE2LjgyIDE5SDIyQzIyLjU1IDE5IDIzIDE4LjU1IDIzIDE4VjE2LjVDMjMgMTQuMTcgMTguMzMgMTMgMTYgMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--verified: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzI1IDEuMDU1MjVMMy40OTE2NyAzLjY0NjkyQzIuODkxNjcgMy45MTM1OCAyLjUgNC41MTM1OCAyLjUgNS4xNzE5MlY5LjA4ODU4QzIuNSAxMy43MTM2IDUuNyAxOC4wMzg2IDEwIDE5LjA4ODZDMTQuMyAxOC4wMzg2IDE3LjUgMTMuNzEzNiAxNy41IDkuMDg4NThWNS4xNzE5MkMxNy41IDQuNTEzNTggMTcuMTA4MyAzLjkxMzU4IDE2LjUwODMgMy42NDY5MkwxMC42NzUgMS4wNTUyNUMxMC4yNSAwLjg2MzU4MiA5Ljc1IDAuODYzNTgyIDkuMzI1IDEuMDU1MjVaTTcuNzQxNjcgMTMuNDk2OUw1LjU4MzMzIDExLjMzODZDNS4yNTgzMyAxMS4wMTM2IDUuMjU4MzMgMTAuNDg4NiA1LjU4MzMzIDEwLjE2MzZDNS45MDgzMyA5LjgzODU4IDYuNDMzMzMgOS44Mzg1OCA2Ljc1ODMzIDEwLjE2MzZMOC4zMzMzMyAxMS43MzAyTDEzLjIzMzMgNi44MzAyNUMxMy41NTgzIDYuNTA1MjUgMTQuMDgzMyA2LjUwNTI1IDE0LjQwODMgNi44MzAyNUMxNC43MzMzIDcuMTU1MjUgMTQuNzMzMyA3LjY4MDI1IDE0LjQwODMgOC4wMDUyNUw4LjkxNjY3IDEzLjQ5NjlDOC42IDEzLjgyMTkgOC4wNjY2NyAxMy44MjE5IDcuNzQxNjcgMTMuNDk2OVoiIGZpbGw9IiMwMEUyQTEiLz4KPC9zdmc+Cg==');
+  --str-video__icon--streaming: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy4yIDE0LjNDNS44NCAxMi45NSA1IDExLjA3IDUgOXMuODQtMy45NSAyLjItNS4zbDEuNzggMS43N0E0Ljk3IDQuOTcgMCAwMDcuNSA5YzAgMS4zOC41NiAyLjYyIDEuNDYgMy41NEw3LjIgMTQuM3pNMTcuOCAxNC4zYzEuMzYtMS4zNSAyLjItMy4yMyAyLjItNS4zcy0uODQtMy45NS0yLjItNS4zbC0xLjc4IDEuNzdBNC45NyA0Ljk3IDAgMDExNy41IDljMCAxLjM4LS41NiAyLjYyLTEuNDYgMy41NGwxLjc2IDEuNzZ6TTEyLjUgNi41YTIuNSAyLjUgMCAxMDAgNSAyLjUgMi41IDAgMDAwLTV6TTIyLjUgOWMwIDIuNzYtMS4xMyA1LjI2LTIuOTQgNy4wNmwxLjc4IDEuNzhBMTIuNDQgMTIuNDQgMCAwMDI1IDljMC0zLjQ1LTEuNC02LjU4LTMuNjYtOC44NGwtMS43OCAxLjc4QTkuOTcgOS45NyAwIDAxMjIuNSA5ek01LjQ0IDEuOTRMMy42Ni4xNkExMi40NCAxMi40NCAwIDAwMCA5YzAgMy40NSAxLjQgNi41OCAzLjY2IDguODRsMS43OC0xLjc4QTkuOTcgOS45NyAwIDAxMi41IDljMC0yLjc2IDEuMTMtNS4yNiAyLjk0LTcuMDZ6IiBmaWxsPSIjQjBCNEI3Ii8+PC9zdmc+');
+  --str-video__icon--checkmark: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
+  --str-video__icon--star: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjEuNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwzLjA5IDYuMjZMMjIgOS4yN2wtNSA0Ljg3IDEuMTggNi44OEwxMiAxNy43N2wtNi4xOCAzLjI1TDcgMTQuMTQgMiA5LjI3bDYuOTEtMS4wMUwxMiAyeiIvPjwvc3ZnPg==');
+  --str-video__icon--star-filled: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0IwQjRCNyIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjEuNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwzLjA5IDYuMjZMMjIgOS4yN2wtNSA0Ljg3IDEuMTggNi44OEwxMiAxNy43N2wtNi4xOCAzLjI1TDcgMTQuMTQgMiA5LjI3bDYuOTEtMS4wMUwxMiAyeiIvPjwvc3ZnPg==');
+  --str-video__icon--feedback: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0IwQjRCNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg1LjE3TDQgMTcuMTdWNGgxNnYxMnpNNyA5aDJ2Mkg3em00IDBoMnYyaC0yem00IDBoMnYyaC0yeiIvPjwvc3ZnPg==');
+}
+
+.str-video__icon--eye {
+  -webkit-mask-image: var(--str-video__icon--eye);
+  mask-image: var(--str-video__icon--eye);
+}
+
+.str-video__icon--login {
+  -webkit-mask-image: var(--str-video__icon--login);
+  mask-image: var(--str-video__icon--login);
+}
+
+.str-video__icon--participants {
+  -webkit-mask-image: var(--str-video__icon--participants);
+  mask-image: var(--str-video__icon--participants);
+}
+
+.str-video__icon--verified {
+  -webkit-mask-image: var(--str-video__icon--verified);
+  mask-image: var(--str-video__icon--verified);
+}
+
+.str-video__icon--blur-icon {
+  -webkit-mask-image: var(--str-video__icon--blur-icon);
+  mask-image: var(--str-video__icon--blur-icon);
+}
+
+.str-video__icon--streaming {
+  -webkit-mask-image: var(--str-video__icon--streaming);
+  mask-image: var(--str-video__icon--streaming);
+}
+
+.str-video__icon--checkmark {
+  -webkit-mask-image: var(--str-video__icon--checkmark);
+  mask-image: var(--str-video__icon--checkmark);
+}
+
+.str-video__icon--star {
+  -webkit-mask-image: var(--str-video__icon--star);
+  mask-image: var(--str-video__icon--star);
+}
+
+.str-video__icon--star-filled {
+  -webkit-mask-image: var(--str-video__icon--star-filled);
+  mask-image: var(--str-video__icon--star-filled);
+}
+
+.str-video__icon--feedback {
+  -webkit-mask-image: var(--str-video__icon--feedback);
+  mask-image: var(--str-video__icon--feedback);
+}

package/src/Embedded/shared/JoinError/JoinError-layout.scss

@@ -0,0 +1,17 @@
+.str-video__embedded-join-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-xl);
+  min-height: 100%;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: var(--str-video__spacing-xl);
+  text-align: center;
+}
+
+.str-video__embedded-join-error__message {
+  font-size: var(--str-video__font-size-sm);
+}

package/src/Embedded/shared/JoinError/JoinError-theme.scss

@@ -0,0 +1,8 @@
+.str-video__embedded-join-error {
+  background: var(--str-video__base-color4);
+  color: var(--str-video__text-color1);
+}
+
+.str-video__embedded-join-error__message {
+  color: var(--str-video__text-color2);
+}

package/src/Embedded/shared/JoinError/index.scss

@@ -0,0 +1,2 @@
+@use 'JoinError-layout';
+@use 'JoinError-theme';

package/src/Embedded/shared/LoadingScreen/LoadingScreen-layout.scss

@@ -0,0 +1,14 @@
+.str-video__embedded-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  .str-video__loading-indicator__icon.spinner {
+    width: 4rem;
+    height: 4rem;
+    -webkit-mask-size: 4rem;
+    mask-size: 4rem;
+  }
+}

package/src/Embedded/shared/LoadingScreen/index.scss

@@ -0,0 +1 @@
+@use 'LoadingScreen-layout';

package/src/Embedded/shared/Lobby/Lobby-layout.scss

@@ -0,0 +1,176 @@
+.str-video__embedded-lobby {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: var(--str-video__spacing-lg);
+}
+
+.str-video__embedded-lobby__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin: auto 0;
+}
+
+.str-video__embedded-lobby__heading {
+  font-size: var(--str-video__font-size-xl);
+  font-weight: 500;
+  text-align: center;
+  margin: 0 0 var(--str-video__spacing-md);
+}
+
+.str-video__embedded-lobby__camera {
+  width: 100%;
+
+  &--off {
+    .str-video__video-preview-container {
+      opacity: 0.75;
+    }
+  }
+}
+
+.str-video__embedded-lobby__video-preview {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  max-height: calc(100cqh - 200px);
+  border-radius: var(--str-video__border-radius-md);
+  overflow: hidden;
+}
+
+.str-video__embedded-lobby__camera .str-video__video-preview-container {
+  height: 100%;
+  width: 100%;
+  border-color: transparent;
+}
+
+.str-video__embedded-lobby__camera .str-video__video-preview video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.str-video__embedded-lobby__media-toggle {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  gap: var(--str-video__spacing-sm);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.str-video__embedded-lobby__media-toggle .str-video__menu-toggle-button {
+  display: none;
+}
+
+.str-video__embedded-lobby__no-permission {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: var(--str-video__font-size-sm);
+  text-align: center;
+  padding: var(--str-video__spacing-md);
+}
+
+.str-video__embedded-lobby__no-permission .str-video__avatar,
+.str-video__embedded-lobby__no-permission
+  .str-video__avatar--initials-fallback {
+  width: 100px;
+  height: 100px;
+  font-size: 2.5rem;
+}
+
+.str-video__embedded-lobby__media {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--str-video__spacing-md);
+  margin-bottom: var(--str-video__spacing-sm);
+}
+
+.str-video__embedded-lobby__device-button {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
+  background: transparent;
+  border: none;
+  font-size: var(--str-video__font-size-xs);
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  &-label {
+    width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    margin: 0;
+  }
+
+  &--disabled {
+    cursor: default;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+}
+
+.str-video__embedded-lobby__display-name {
+  border-radius: var(--str-video__border-radius-xl);
+  padding: var(--str-video__spacing-lg);
+  width: 100%;
+  text-align: center;
+  backdrop-filter: blur(10px);
+
+  &-label {
+    font-weight: 600;
+    font-size: var(--str-video__font-size-xs);
+    letter-spacing: 0.25ex;
+    text-transform: uppercase;
+    margin-bottom: var(--str-video__spacing-md);
+    display: block;
+  }
+
+  .str-video__button {
+    height: 28px;
+    min-width: unset;
+    gap: var(--str-video__spacing-xs);
+    padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
+    font-size: var(--str-video__font-size-sm);
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+}
+
+@container (min-width: 600px) {
+  .str-video__embedded-lobby__content {
+    max-width: 350px;
+  }
+
+  .str-video__embedded-lobby__camera {
+    width: 600px;
+  }
+
+  .str-video__embedded-lobby__device-button-label {
+    width: 150px;
+  }
+}

package/src/Embedded/shared/Lobby/Lobby-theme.scss

@@ -0,0 +1,26 @@
+.str-video__embedded-lobby__no-permission {
+  color: var(--str-video__text-color2);
+}
+
+.str-video__embedded-lobby__device-button {
+  color: var(--str-video__text-color1);
+}
+
+.str-video__embedded-lobby__display-name {
+  background-color: var(--str-video__backdrop1);
+  border: 1px solid var(--str-video__base-color6);
+
+  &-value {
+    color: var(--str-video__text-color2);
+    margin-bottom: var(--str-video__spacing-md);
+    display: block;
+  }
+
+  .str-video__button {
+    background-color: var(--str-video__button-primary-active);
+
+    &:not([disabled]):hover {
+      background-color: var(--str-video__button-primary-hover);
+    }
+  }
+}

package/src/Embedded/shared/Lobby/index.scss

@@ -0,0 +1,2 @@
+@use 'Lobby-layout';
+@use 'Lobby-theme';

package/src/Embedded/shared/index.scss

@@ -0,0 +1,10 @@
+@use 'Icons';
+@use 'Lobby';
+@use 'Feedback';
+@use 'BlurToggleButton';
+@use 'CallControls';
+@use 'ConnectionNotification';
+@use 'EmbeddedParticipantViewUI';
+@use 'LoadingScreen';
+@use 'ErrorScreen';
+@use 'JoinError';

package/src/_utils.scss

@@ -1,3 +1,25 @@
+@use 'sass:map';
+
+$breakpoints: (
+  xs: 336px,
+  sm: 600px,
+  md: 1024px,
+  lg: 1200px,
+  xlg: 1440px,
+);
+
+@mixin respond-above($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    $breakpoint-value: map.get($breakpoints, $breakpoint);
+
+    @media (min-width: $breakpoint-value) {
+      @content;
+    }
+  } @else {
+    @warn 'Invalid breakpoint: #{$breakpoint}.';
+  }
+}
+
 @mixin ellipsis-text {
   white-space: nowrap;
   overflow-y: visible;