@streamoid/ui 0.6.10 → 0.6.11

package/dist/index.css

@@ -6285,6 +6285,886 @@
   pointer-events: none;
 }
 
+/* src/SC-textArea/ScTextArea.module.css */
+.ScTextArea_scTextArea,
+.ScTextArea_scTextArea * {
+  box-sizing: border-box;
+}
+.ScTextArea_scTextArea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+}
+.ScTextArea_scTextArea.ScTextArea_label-group-none {
+  gap: 0;
+}
+.ScTextArea_labelContainer {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  height: 1.5rem;
+  position: relative;
+}
+.ScTextArea_label {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  text-align: left;
+  font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--text-text-sm-regular-font-size, 0.875rem);
+  line-height: var(--text-text-sm-regular-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-regular-font-weight, 400);
+  position: relative;
+  flex: 1;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ScTextArea_info {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  text-align: right;
+  font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--text-text-sm-regular-font-size, 0.875rem);
+  line-height: var(--text-text-sm-regular-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-regular-font-weight, 400);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.ScTextArea_inputContainer {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-border-subtle, transparent);
+  border-radius: var(--radius-3xl, 1rem);
+  padding: var(--spacing-xl, 0.75rem) var(--spacing-3xl, 1rem) var(--spacing-xl, 0.75rem) var(--spacing-3xl, 1rem);
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  height: auto;
+  min-height: 4.5rem;
+  position: relative;
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+}
+.ScTextArea_inputText {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  text-align: left;
+  font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--text-text-sm-regular-font-size, 0.875rem);
+  line-height: var(--text-text-sm-regular-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-regular-font-weight, 400);
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  min-height: 4rem;
+  background: transparent;
+  outline: none;
+  border: none;
+  resize: vertical;
+  white-space: normal;
+  overflow: auto;
+}
+.ScTextArea_scTextArea:hover .ScTextArea_inputContainer,
+.ScTextArea_scTextArea.ScTextArea_state-hover .ScTextArea_inputContainer,
+.ScTextArea_scTextArea.ScTextArea_state-filled .ScTextArea_inputContainer {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-color: var(--alias-border-default, transparent);
+}
+.ScTextArea_scTextArea.ScTextArea_state-filled .ScTextArea_inputText {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScTextArea_scTextArea.ScTextArea_state-active .ScTextArea_inputContainer {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-style: solid;
+  border-color: var(--alias-border-strong, #5c5c5c);
+  border-width: 0.0625rem;
+}
+.ScTextArea_scTextArea.ScTextArea_state-active .ScTextArea_inputText {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScTextArea_scTextArea.ScTextArea_state-error .ScTextArea_inputContainer {
+  border-style: solid;
+  border-color: var(--alias-text-and-icons-error, #d11a1a);
+  border-width: 0.0625rem;
+}
+.ScTextArea_scTextArea.ScTextArea_state-disabled .ScTextArea_inputContainer {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border-color: var(--alias-border-subtle, transparent);
+}
+.ScTextArea_scTextArea.ScTextArea_state-disabled .ScTextArea_inputText {
+  color: var(--alias-text-and-icons-disabled, #5c5c5c);
+  cursor: not-allowed;
+  resize: none;
+}
+.ScTextArea_scTextArea.ScTextArea_label-group-none .ScTextArea_labelContainer {
+  display: none;
+}
+
+/* src/SC-select/ScSelect.module.css */
+.ScSelect_scSelect,
+.ScSelect_scSelect * {
+  box-sizing: border-box;
+}
+.ScSelect_scSelect {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+  width: 100%;
+  position: relative;
+}
+.ScSelect_scSelect.ScSelect_label-group- {
+  gap: 0;
+}
+.ScSelect_labelContainer {
+  display: flex;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: center;
+  align-self: stretch;
+  height: 1.5rem;
+}
+.ScSelect_label {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  flex: 1;
+}
+.ScSelect_selectArea {
+  position: relative;
+  width: 100%;
+}
+.ScSelect_trigger {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-border-subtle, transparent);
+  border-radius: var(--radius-3xl, 1rem);
+  padding: var(--spacing-xl, 0.75rem) var(--spacing-3xl, 1rem);
+  display: flex;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  height: 3rem;
+  overflow: hidden;
+  cursor: pointer;
+  outline: none;
+  font-family: Inter, sans-serif;
+  text-align: left;
+}
+.ScSelect_triggerText {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ScSelect_triggerText.ScSelect_placeholder {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+}
+.ScSelect_chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+.ScSelect_chevronOpen {
+  transform: rotate(180deg);
+}
+.ScSelect_scSelect:hover .ScSelect_trigger {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScSelect_scSelect.ScSelect_state-filled .ScSelect_trigger {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScSelect_scSelect.ScSelect_state-active .ScSelect_trigger {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-color: var(--alias-border-strong, #5c5c5c);
+}
+.ScSelect_scSelect.ScSelect_state-disabled .ScSelect_trigger {
+  cursor: not-allowed;
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border-color: var(--alias-border-subtle, transparent);
+}
+.ScSelect_scSelect.ScSelect_state-disabled .ScSelect_triggerText {
+  color: var(--alias-text-and-icons-disabled, #5c5c5c);
+}
+.ScSelect_scSelect.ScSelect_state-disabled .ScSelect_chevron {
+  color: var(--alias-text-and-icons-disabled, #5c5c5c);
+}
+.ScSelect_menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin-top: 4px;
+  background: var(--alias-surface-subtleraised, #1f1f1f);
+  border: 1px solid var(--alias-border-divider, #242424);
+  border-radius: var(--radius-md, 0.5rem);
+  padding: var(--spacing-xs, 0.25rem);
+  max-height: 14rem;
+  overflow-y: auto;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+}
+.ScSelect_option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--spacing-md, 0.5rem) var(--spacing-xl, 0.75rem);
+  border-radius: var(--radius-md, 0.5rem);
+  cursor: pointer;
+  width: 100%;
+}
+.ScSelect_option:hover {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+}
+.ScSelect_option-selected {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+}
+.ScSelect_optionLabel {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+.ScSelect_optionDescription {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  font-family: Inter, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+/* src/SC-fileField/ScFileField.module.css */
+.ScFileField_scFileField,
+.ScFileField_scFileField * {
+  box-sizing: border-box;
+}
+.ScFileField_scFileField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+  width: 100%;
+  position: relative;
+  font-family: Inter, sans-serif;
+}
+.ScFileField_labelContainer {
+  display: flex;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: center;
+  align-self: stretch;
+  height: 1.5rem;
+}
+.ScFileField_label {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  flex: 1;
+}
+.ScFileField_dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 0.5rem);
+  align-self: stretch;
+  min-height: 8rem;
+  padding: var(--spacing-6xl, 1.5rem);
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px dashed var(--alias-border-default, #3e3e3e);
+  border-radius: var(--radius-xl, 0.75rem);
+  cursor: pointer;
+  text-align: center;
+}
+.ScFileField_dropzone:hover {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+}
+.ScFileField_hiddenInput {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.ScFileField_uploadIcon {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  flex-shrink: 0;
+}
+.ScFileField_dropzoneText {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+.ScFileField_dropzoneAction {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-weight: 600;
+}
+.ScFileField_acceptedText {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: Inter, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+.ScFileField_inputContainer {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-border-subtle, transparent);
+  border-radius: var(--radius-3xl, 1rem);
+  padding: var(--spacing-xl, 0.75rem) var(--spacing-3xl, 1rem);
+  display: flex;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: center;
+  align-self: stretch;
+  min-height: 3rem;
+  overflow: hidden;
+}
+.ScFileField_fileIcon {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  flex-shrink: 0;
+}
+.ScFileField_fileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 0.5rem);
+  flex: 1;
+  min-width: 0;
+}
+.ScFileField_fileName {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ScFileField_progressTrack {
+  height: 4px;
+  width: 100%;
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-radius: var(--radius-xs, 0.25rem);
+  overflow: hidden;
+}
+.ScFileField_progressFill {
+  height: 100%;
+  background: var(--alias-fill-base-base, #f5f5f5);
+  border-radius: var(--radius-xs, 0.25rem);
+  transition: width 0.2s ease;
+}
+.ScFileField_clearButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  flex-shrink: 0;
+}
+.ScFileField_clearButton:hover {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScFileField_errorText {
+  color: var(--alias-text-and-icons-error, #d11a1a);
+  font-family: Inter, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+/* src/SC-mediaApproval/ScMediaApproval.module.css */
+.ScMediaApproval_scMediaApproval,
+.ScMediaApproval_scMediaApproval * {
+  box-sizing: border-box;
+}
+.ScMediaApproval_scMediaApproval {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl, 1rem);
+  width: 100%;
+}
+.ScMediaApproval_mediaFrame {
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--alias-border-divider, #242424);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--alias-surface-base, #101010);
+  overflow: hidden;
+}
+.ScMediaApproval_media {
+  display: block;
+  width: 100%;
+  height: 13rem;
+  object-fit: contain;
+  background: #000000;
+  cursor: zoom-in;
+}
+.ScMediaApproval_mediaEmpty {
+  width: 100%;
+  height: 13rem;
+  background: #000000;
+}
+.ScMediaApproval_spinnerOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+}
+.ScMediaApproval_spinner {
+  animation: ScMediaApproval_spin 0.8s linear infinite;
+}
+@keyframes ScMediaApproval_spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.ScMediaApproval_navButton {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  color: var(--alias-text-and-icons-fullwhite, #ffffff);
+  cursor: pointer;
+}
+.ScMediaApproval_navPrev {
+  left: var(--spacing-md, 8px);
+}
+.ScMediaApproval_navNext {
+  right: var(--spacing-md, 8px);
+}
+.ScMediaApproval_counterBadge {
+  position: absolute;
+  top: var(--spacing-md, 8px);
+  right: var(--spacing-md, 8px);
+  padding: var(--spacing-xs, 4px) var(--spacing-md, 8px);
+  border-radius: var(--radius-xs, 4px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  color: var(--alias-text-and-icons-fullwhite, #ffffff);
+  font-family: Inter, sans-serif;
+  font-size: 10px;
+  line-height: 1;
+  font-weight: 400;
+}
+.ScMediaApproval_dots {
+  position: absolute;
+  bottom: var(--spacing-md, 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  padding: var(--spacing-xs, 4px) var(--spacing-md, 8px);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(6px);
+}
+.ScMediaApproval_dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: width 0.15s ease, background 0.15s ease;
+}
+.ScMediaApproval_dot.ScMediaApproval_state-active {
+  width: 1rem;
+  background: var(--alias-text-and-icons-fullwhite, #ffffff);
+}
+.ScMediaApproval_feedbackBlock {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+  width: 100%;
+}
+.ScMediaApproval_label {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+.ScMediaApproval_inputContainer {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-border-subtle, transparent);
+  border-radius: var(--radius-3xl, 1rem);
+  padding: var(--spacing-xl, 0.75rem) var(--spacing-3xl, 1rem);
+  display: flex;
+  align-items: stretch;
+  align-self: stretch;
+  overflow: hidden;
+}
+.ScMediaApproval_textArea {
+  width: 100%;
+  min-height: 4.5rem;
+  resize: vertical;
+  background: transparent;
+  outline: none;
+  border: none;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+.ScMediaApproval_textArea::placeholder {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+}
+
+/* src/SC-mediaSelect/ScMediaSelect.module.css */
+.ScMediaSelect_scMediaSelect,
+.ScMediaSelect_scMediaSelect * {
+  box-sizing: border-box;
+}
+.ScMediaSelect_scMediaSelect {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 0.5rem);
+  width: 100%;
+  font-family: Inter, sans-serif;
+}
+.ScMediaSelect_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3xl, 1rem);
+  align-self: stretch;
+}
+.ScMediaSelect_countLabel {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  font-family: Inter, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+.ScMediaSelect_actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md, 0.5rem);
+}
+.ScMediaSelect_linkButton {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  font-weight: 400;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.ScMediaSelect_linkButton:hover {
+  text-decoration: underline;
+}
+.ScMediaSelect_divider {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  font-size: 0.6875rem;
+  line-height: 1rem;
+}
+.ScMediaSelect_grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-md, 0.5rem);
+  max-height: 18.75rem;
+  overflow-y: auto;
+  padding: var(--spacing-md, 0.5rem);
+  border: 1px solid var(--alias-border-divider, #242424);
+  border-radius: var(--radius-xl, 0.75rem);
+  background: var(--alias-surface-base, #101010);
+}
+.ScMediaSelect_item {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-md, 0.5rem);
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid var(--alias-border-subtle, transparent);
+}
+.ScMediaSelect_item.ScMediaSelect_state-default {
+  border-color: transparent;
+}
+.ScMediaSelect_item.ScMediaSelect_state-default:hover {
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScMediaSelect_item.ScMediaSelect_state-selected {
+  border-color: var(--alias-border-strong, #5c5c5c);
+}
+.ScMediaSelect_media {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #000000;
+  display: block;
+}
+.ScMediaSelect_checkBadge {
+  position: absolute;
+  top: var(--spacing-xs, 0.25rem);
+  right: var(--spacing-xs, 0.25rem);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: var(--alias-fill-base-base, #f5f5f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ScMediaSelect_previewButton {
+  position: absolute;
+  bottom: var(--spacing-xs, 0.25rem);
+  right: var(--spacing-xs, 0.25rem);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius-xs, 0.25rem);
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+.ScMediaSelect_item:hover .ScMediaSelect_previewButton {
+  display: flex;
+}
+@media (max-width: 22.5rem) {
+  .ScMediaSelect_grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* src/SC-todoList/ScTodoList.module.css */
+.ScTodoList_scTodoList,
+.ScTodoList_scTodoList * {
+  box-sizing: border-box;
+}
+.ScTodoList_scTodoList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 0.5rem);
+  width: 100%;
+  font-family: Inter, sans-serif;
+}
+.ScTodoList_progress {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 0.25rem);
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  padding: 0 var(--spacing-md, 0.5rem);
+}
+.ScTodoList_progressIcon {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  flex-shrink: 0;
+}
+.ScTodoList_progressText {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  font-family: Inter, sans-serif;
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+.ScTodoList_rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+}
+.ScTodoList_row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md, 0.5rem);
+  padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem);
+  border-radius: var(--radius-md, 0.5rem);
+  width: 100%;
+}
+.ScTodoList_row:hover {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+}
+.ScTodoList_checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+.ScTodoList_content {
+  flex: 1;
+  min-width: 0;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  word-break: break-word;
+}
+.ScTodoList_content.ScTodoList_status-completed {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  text-decoration: line-through;
+}
+.ScTodoList_editInput {
+  flex: 1;
+  min-width: 0;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border: 1px solid var(--alias-border-strong, #5c5c5c);
+  border-radius: var(--radius-md, 0.5rem);
+  padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem);
+  outline: none;
+}
+.ScTodoList_actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 0.25rem);
+  flex-shrink: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+.ScTodoList_row:hover .ScTodoList_actions,
+.ScTodoList_row:focus-within .ScTodoList_actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+.ScTodoList_actionButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-xs, 0.25rem);
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  cursor: pointer;
+  outline: none;
+}
+.ScTodoList_actionButton:hover {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScTodoList_actionButtonDanger:hover {
+  color: var(--alias-text-and-icons-error, #d11a1a);
+}
+.ScTodoList_addRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md, 0.5rem);
+  width: 100%;
+}
+.ScTodoList_addInput {
+  flex: 1;
+  min-width: 0;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: Inter, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  height: 2.5rem;
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-border-subtle, transparent);
+  border-radius: var(--radius-md, 0.5rem);
+  padding: var(--spacing-md, 0.5rem) var(--spacing-xl, 0.75rem);
+  outline: none;
+}
+.ScTodoList_addInput::placeholder {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+}
+.ScTodoList_addInput:hover,
+.ScTodoList_addInput:focus {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScTodoList_addButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+  padding: 0;
+  margin: 0;
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-border-subtle, transparent);
+  border-radius: var(--radius-md, 0.5rem);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  cursor: pointer;
+  outline: none;
+  transition: opacity 0.12s ease;
+}
+.ScTodoList_addButton:hover:not(:disabled) {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-color: var(--alias-border-default, #3e3e3e);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScTodoList_addButton:disabled {
+  color: var(--alias-text-and-icons-disabled, #5c5c5c);
+  cursor: not-allowed;
+}
+
 /* src/SC-Role-Mobile/ScRoleMobile.module.css */
 .ScRoleMobile_scRoleMobile {
   display: flex;