@streamoid/ui 0.6.13 → 0.6.15

package/dist/index.css

@@ -1244,6 +1244,7 @@
   position: relative;
   overflow: visible;
   aspect-ratio: 1;
+  cursor: pointer;
 }
 .ScRadio_scRadio .ScRadio_vector {
   width: 100%;
@@ -1304,6 +1305,7 @@
   position: relative;
   overflow: hidden;
   cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease;
 }
 .ScButton_container {
   display: flex;
@@ -1452,6 +1454,32 @@
 .ScButton_scButton.ScButton_state-hover.ScButton_variant-primary {
   background: var(--alias-fill-base-basehover, #bfbfbf);
 }
+.ScButton_scButton.ScButton_variant-mono {
+  background: var(--alias-surface-inverse, #f5f5f5);
+}
+.ScButton_scButton.ScButton_variant-mono .ScButton_label,
+.ScButton_scButton.ScButton_variant-mono .ScButton_container {
+  color: var(--alias-text-and-icons-inverse, #101010);
+}
+.ScButton_scButton.ScButton_variant-mono:hover,
+.ScButton_scButton.ScButton_state-hover.ScButton_variant-mono {
+  background: var(--alias-surface-inverse, #f5f5f5);
+  transform: scale(1.03);
+}
+.ScButton_spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0.15rem solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ScButton_sc-btn-spin 0.8s linear infinite;
+}
+@keyframes ScButton_sc-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .ScButton_scButton.ScButton_size-sm .ScButton_siconHomeInstance {
   width: 1rem !important;
   height: 1rem !important;
@@ -3146,6 +3174,75 @@
 .ScTextField_scTextField.ScTextField_label-group-none .ScTextField_labelContainer {
   display: none;
 }
+.ScTextField_required {
+  color: var(--alias-text-and-icons-error, #d11a1a);
+  margin-left: 0.125rem;
+}
+.ScTextField_desc {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  text-align: left;
+  font-family: var(--text-text-xs-regular-font-family, "Inter-Regular", sans-serif);
+  font-size: var(--text-text-xs-regular-font-size, 0.75rem);
+  line-height: var(--text-text-xs-regular-line-height, 1.125rem);
+  font-weight: var(--text-text-xs-regular-font-weight, 400);
+  align-self: stretch;
+}
+.ScTextField_scTextField.ScTextField_tall .ScTextField_inputContainer {
+  height: auto;
+  min-height: 5rem;
+  align-items: flex-start;
+}
+
+/* src/SC-InfoPopup/ScInfoPopup.module.css */
+.ScInfoPopup_scInfoPopup,
+.ScInfoPopup_scInfoPopup * {
+  box-sizing: border-box;
+}
+.ScInfoPopup_scInfoPopup {
+  position: relative;
+  display: inline-block;
+}
+.ScInfoPopup_infoIcon {
+  display: block;
+  cursor: pointer;
+  margin: 0 12px;
+  width: 18px;
+  height: 18px;
+}
+.ScInfoPopup_content {
+  position: absolute;
+  top: 18px;
+  right: 0;
+  transform: translateX(50%);
+  width: max-content;
+  max-width: 300px;
+  background-color: var(--alias-surface-base, #101010);
+  border-radius: 6px;
+  padding: 8px;
+  z-index: 2;
+  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
+}
+.ScInfoPopup_closeIconContainer {
+  position: relative;
+}
+.ScInfoPopup_closeIcon {
+  position: absolute;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  margin: 0;
+}
+.ScInfoPopup_contentText {
+  display: block;
+  font-size: 12px;
+  margin-top: 0px;
+  margin-right: 18px;
+  max-height: 100px;
+  overflow-y: auto;
+  line-height: 1.4;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
 
 /* src/SC-Role/ScRole.module.css */
 .ScRole_scRole,
@@ -5859,55 +5956,120 @@
   opacity: 1;
 }
 
-/* src/SC-InfoPopup/ScInfoPopup.module.css */
-.ScInfoPopup_scInfoPopup,
-.ScInfoPopup_scInfoPopup * {
+/* src/SC-Drawer/ScDrawer.module.css */
+.ScDrawer_drawer,
+.ScDrawer_drawer * {
   box-sizing: border-box;
 }
-.ScInfoPopup_scInfoPopup {
-  position: relative;
-  display: inline-block;
+.ScDrawer_drawer {
+  width: 512px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  background: var(--alias-surface-subtleraised, #1a1a1a);
+  overflow: hidden;
+  z-index: 10;
 }
-.ScInfoPopup_infoIcon {
-  display: block;
+.ScDrawer_side-right {
+  right: 0;
+  border-radius: 24px 0 0 24px;
+  box-shadow: -8px 0 56px 8px rgba(0, 0, 0, 0.16);
+}
+.ScDrawer_side-left {
+  left: 0;
+  border-radius: 0 24px 24px 0;
+  box-shadow: 8px 0 56px 8px rgba(0, 0, 0, 0.16);
+}
+.ScDrawer_content {
+  padding: 56px 96px 0 96px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ScDrawer_backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9;
+}
+
+/* src/SC-Tabs/ScTabs.module.css */
+.ScTabs_tabs,
+.ScTabs_tabs * {
+  box-sizing: border-box;
+}
+.ScTabs_tabs {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ScTabs_tab {
+  padding: 6px 12px;
   cursor: pointer;
-  margin: 0 12px;
-  width: 18px;
-  height: 18px;
+  text-transform: capitalize;
+  white-space: nowrap;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  border-radius: 100px;
+  border: 1px solid var(--alias-surface-canvas, #0f0f0f);
 }
-.ScInfoPopup_content {
-  position: absolute;
-  top: 18px;
-  right: 0;
-  transform: translateX(50%);
+.ScTabs_active {
+  background: var(--alias-surface-canvas, #0f0f0f);
+}
+.ScTabs_autoWidth {
   width: max-content;
-  max-width: 300px;
-  background-color: var(--alias-surface-base, #101010);
-  border-radius: 6px;
-  padding: 8px;
-  z-index: 2;
-  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
 }
-.ScInfoPopup_closeIconContainer {
-  position: relative;
+.ScTabs_allowWrap {
+  flex-wrap: wrap;
+  row-gap: 8px;
 }
-.ScInfoPopup_closeIcon {
-  position: absolute;
-  right: 0;
-  width: 18px;
-  height: 18px;
+.ScTabs_compact {
+  gap: 8px;
+}
+.ScTabs_compact .ScTabs_tab {
+  padding: 4px 10px;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+/* src/SC-Counter/ScCounter.module.css */
+.ScCounter_counter,
+.ScCounter_counter * {
+  box-sizing: border-box;
+}
+.ScCounter_counter {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border: 1px solid var(--alias-surface-infohover, #2a2a2a);
+  border-radius: 16px;
+  padding: 12px 16px;
+  width: 100%;
+}
+.ScCounter_step {
   cursor: pointer;
-  margin: 0;
+  display: flex;
+  align-items: center;
 }
-.ScInfoPopup_contentText {
-  display: block;
-  font-size: 12px;
-  margin-top: 0px;
-  margin-right: 18px;
-  max-height: 100px;
-  overflow-y: auto;
-  line-height: 1.4;
-  color: var(--alias-text-and-icons-primary, #f5f5f5);
+.ScCounter_value {
+  cursor: pointer;
+}
+.ScCounter_inputContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ScCounter_inputContainer input {
+  border: none;
+  outline: none;
+  width: 30%;
+  background-color: var(--alias-fill-neutral-neutralplus, #151515);
+  color: inherit;
 }
 
 /* src/SC-Pagination/ScPagination.module.css */
@@ -6195,6 +6357,511 @@
   width: 10rem;
 }
 
+/* src/SC-DefaultCard/ScDefaultCard.module.css */
+.ScDefaultCard_scDefaultCard,
+.ScDefaultCard_scDefaultCard * {
+  box-sizing: border-box;
+}
+.ScDefaultCard_scDefaultCard {
+  background: var(--alias-surface-base, #101010);
+  border: 0.03125rem solid var(--alias-border-subtle, #242424);
+  border-radius: var(--radius-4xl, 1.125rem);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+.ScDefaultCard_scDefaultCard:hover,
+.ScDefaultCard_scDefaultCard.ScDefaultCard_state-hover {
+  background: var(--alias-surface-basesubtle, #151515);
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScDefaultCard_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md, 0.5rem);
+  padding: var(--spacing-5xl, 1.25rem);
+  width: 100%;
+  text-align: center;
+}
+.ScDefaultCard_title {
+  margin: 0;
+  width: 100%;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: var(--text-text-md-regular-font-family, "Inter-Regular", sans-serif);
+  font-size: var(--text-text-md-regular-font-size, 1rem);
+  line-height: var(--text-text-md-regular-line-height, 1.5rem);
+  font-weight: var(--text-text-md-regular-font-weight, 400);
+  word-break: break-word;
+}
+.ScDefaultCard_description {
+  margin: 0;
+  width: 100%;
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--text-text-xs-regular-font-family, "Inter-Regular", sans-serif);
+  font-size: var(--text-text-xs-regular-font-size, 0.75rem);
+  line-height: var(--text-text-xs-regular-line-height, 1.125rem);
+  font-weight: var(--text-text-xs-regular-font-weight, 400);
+  word-break: break-word;
+}
+
+/* src/SC-ValueMappingL1/ScValueMappingL1.module.css */
+.ScValueMappingL1_scValueMappingL1,
+.ScValueMappingL1_scValueMappingL1 * {
+  box-sizing: border-box;
+}
+.ScValueMappingL1_scValueMappingL1 {
+  background: var(--alias-surface-base, #101010);
+  border: 0.03125rem solid var(--alias-border-subtle, #242424);
+  border-radius: var(--radius-3xl, 1rem);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+.ScValueMappingL1_scValueMappingL1:hover,
+.ScValueMappingL1_scValueMappingL1.ScValueMappingL1_state-hover {
+  background: var(--alias-surface-basesubtle, #151515);
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScValueMappingL1_scValueMappingL1.ScValueMappingL1_state-active {
+  background: var(--alias-surface-raisedoverlay, #313131);
+  border-color: var(--alias-border-default, #3e3e3e);
+}
+.ScValueMappingL1_scValueMappingL1.ScValueMappingL1_updated {
+  padding-right: var(--spacing-md, 0.5rem);
+}
+.ScValueMappingL1_labelWrap {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: var(--spacing-xl, 0.75rem);
+}
+.ScValueMappingL1_label {
+  width: 100%;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ScValueMappingL1_dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+.ScValueMappingL1_dotInner {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full, 999px);
+  background: var(--alias-text-and-icons-infocont, #6da5ff);
+}
+
+/* src/SC-TaxonomyPill/ScTaxonomyPill.module.css */
+.ScTaxonomyPill_scTaxonomyPill,
+.ScTaxonomyPill_scTaxonomyPill * {
+  box-sizing: border-box;
+}
+.ScTaxonomyPill_scTaxonomyPill {
+  background: var(--alias-fill-neutral-neutralactive, #313131);
+  border: 0.03125rem solid var(--alias-border-default, #3e3e3e);
+  border-radius: var(--radius-xl, 0.75rem);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+.ScTaxonomyPill_scTaxonomyPill:hover,
+.ScTaxonomyPill_scTaxonomyPill.ScTaxonomyPill_state-hover {
+  background: var(--alias-fill-neutral-neutralhovertoactive, #2a2a2a);
+}
+.ScTaxonomyPill_inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ScTaxonomyPill_type-pill .ScTaxonomyPill_inner {
+  padding: var(--spacing-md, 0.5rem) var(--spacing-3xl, 1rem);
+}
+.ScTaxonomyPill_type-expand .ScTaxonomyPill_inner {
+  gap: 0;
+  padding: var(--spacing-xxs, 0.125rem) var(--spacing-xs, 0.25rem) var(--spacing-xxs, 0.125rem) var(--spacing-md, 0.5rem);
+}
+.ScTaxonomyPill_type-collapse .ScTaxonomyPill_inner {
+  padding: var(--spacing-xs, 0.25rem);
+}
+.ScTaxonomyPill_label {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  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);
+  white-space: nowrap;
+  text-align: center;
+}
+.ScTaxonomyPill_icon {
+  width: 0.75rem !important;
+  height: 0.75rem !important;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+/* src/SC-SelectionPill/ScSelectionPill.module.css */
+.ScSelectionPill_scSelectionPill,
+.ScSelectionPill_scSelectionPill * {
+  box-sizing: border-box;
+}
+.ScSelectionPill_scSelectionPill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md, 0.5rem) var(--spacing-3xl, 1rem);
+  border-radius: var(--radius-3xl, 1rem);
+  border: 0.03125rem solid var(--alias-border-subtle, #242424);
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  cursor: pointer;
+  position: relative;
+  font: inherit;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+.ScSelectionPill_scSelectionPill:hover,
+.ScSelectionPill_scSelectionPill.ScSelectionPill_state-hover {
+  background: var(--alias-fill-neutral-neutralhovertoactive, #2a2a2a);
+}
+.ScSelectionPill_scSelectionPill:focus {
+  outline: none;
+}
+.ScSelectionPill_scSelectionPill:focus-visible {
+  outline: 0.125rem solid var(--alias-border-focus, #1a6fff);
+  outline-offset: 0.125rem;
+}
+.ScSelectionPill_scSelectionPill.ScSelectionPill_state-selected {
+  background: var(--alias-fill-base-basehover, #bfbfbf);
+  border-color: transparent;
+}
+.ScSelectionPill_label {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  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);
+  white-space: nowrap;
+  text-align: center;
+}
+.ScSelectionPill_scSelectionPill.ScSelectionPill_state-selected .ScSelectionPill_label {
+  color: var(--alias-text-and-icons-inverse, #101010);
+}
+
+/* src/SC-SelectionPillGroup/ScSelectionPillGroup.module.css */
+.ScSelectionPillGroup_scSelectionPillGroup,
+.ScSelectionPillGroup_scSelectionPillGroup * {
+  box-sizing: border-box;
+}
+.ScSelectionPillGroup_scSelectionPillGroup {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-md, 0.5rem);
+  position: relative;
+  width: 100%;
+}
+
+/* src/SC-MappingCard/ScMappingCard.module.css */
+.ScMappingCard_scMappingCard,
+.ScMappingCard_scMappingCard * {
+  box-sizing: border-box;
+}
+.ScMappingCard_scMappingCard {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  flex-shrink: 0;
+  position: relative;
+  background: var(--alias-surface-base, #101010);
+  border: 0.5px solid var(--alias-border-default, #3e3e3e);
+  border-radius: var(--radius-3xl, 16px);
+  overflow: hidden;
+}
+.ScMappingCard_scMappingCard.ScMappingCard_status-confirmed {
+  border: 1px solid var(--alias-border-success, #007d48);
+}
+.ScMappingCard_scMappingCard.ScMappingCard_status-ignored {
+  border: 1px solid var(--alias-border-error, #8f1414);
+}
+.ScMappingCard_badge {
+  flex: 0 0 3rem;
+  width: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  background: var(--alias-surface-subtle, #1a1a1a);
+}
+.ScMappingCard_badgeLetter {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: var(--text-text-md-medium-font-family, "Inter-Medium", sans-serif);
+  font-size: var(--text-text-md-medium-font-size, 1rem);
+  line-height: var(--text-text-md-medium-line-height, 1.5rem);
+  font-weight: var(--text-text-md-medium-font-weight, 500);
+  text-transform: uppercase;
+}
+.ScMappingCard_status-confirmed .ScMappingCard_badgeLetter {
+  color: var(--alias-text-and-icons-success, #00b96b);
+}
+.ScMappingCard_status-ignored .ScMappingCard_badgeLetter {
+  color: var(--alias-text-and-icons-error, #d11a1a);
+}
+.ScMappingCard_content {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: flex-start;
+  gap: var(--spacing-6xl, 24px);
+  padding: var(--spacing-6xl, 24px);
+  min-width: 0;
+}
+.ScMappingCard_source {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.ScMappingCard_sourceCard {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  border-radius: var(--radius-3xl, 16px);
+  overflow: hidden;
+  box-shadow: var(--alias-shadow-sm);
+}
+.ScMappingCard_sourceCard .ScMappingCard_sourceHeader {
+  min-height: 3rem;
+  padding: var(--spacing-xl, 12px) var(--spacing-3xl, 16px);
+  background: var(--alias-surface-raised, #242424);
+  border-radius: var(--radius-3xl, 16px);
+}
+.ScMappingCard_sourceCard .ScMappingCard_sampleRows {
+  padding: var(--spacing-3xl, 16px);
+}
+.ScMappingCard_sourceHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xl, 16px);
+  width: 100%;
+  min-width: 0;
+}
+.ScMappingCard_columnName {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ScMappingCard_addBtn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScMappingCard_sampleRows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl, 16px);
+  min-width: 0;
+}
+.ScMappingCard_sampleRow {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ScMappingCard_sourceCollapsed {
+  display: flex;
+  align-items: center;
+  min-height: 3rem;
+  padding: var(--spacing-xl, 12px) var(--spacing-3xl, 16px);
+  background: var(--alias-surface-raised, #242424);
+  border-radius: var(--radius-3xl, 16px);
+  box-shadow: var(--alias-shadow-sm);
+}
+.ScMappingCard_status-ignored .ScMappingCard_sourceCollapsed .ScMappingCard_columnName {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+}
+.ScMappingCard_targetRegion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 8px);
+  flex: 1 1 0;
+  min-width: 0;
+  align-self: flex-start;
+}
+.ScMappingCard_targetRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xl, 16px);
+  min-width: 0;
+}
+.ScMappingCard_connector {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+}
+.ScMappingCard_targetBox {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-xl, 12px) var(--spacing-3xl, 16px);
+  background: var(--alias-surface-raised, #242424);
+  border-radius: var(--radius-3xl, 16px);
+  box-shadow: var(--alias-shadow-sm);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  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);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ScMappingCard_targetBoxDash {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+}
+.ScMappingCard_warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm, 6px);
+  min-width: 0;
+  padding-left: 40px;
+}
+.ScMappingCard_warningIcon {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  color: var(--alias-text-and-icons-error, #d11a1a);
+}
+.ScMappingCard_warningText {
+  min-width: 0;
+  color: var(--alias-text-and-icons-errorcont, #eb6b6b);
+  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);
+}
+.ScMappingCard_actions {
+  flex: 0 0 336px;
+  width: 336px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-3xl, 16px);
+  align-self: flex-start;
+}
+.ScMappingCard_actionRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xl, 16px);
+  width: 100%;
+}
+.ScMappingCard_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm, 6px);
+  height: 3rem;
+  padding: var(--spacing-xl, 12px) var(--spacing-3xl, 16px);
+  border-radius: var(--radius-xl, 12px);
+  font-family: var(--text-text-md-medium-font-family, "Inter-Medium", sans-serif);
+  font-size: var(--text-text-md-medium-font-size, 1rem);
+  line-height: var(--text-text-md-medium-line-height, 1.5rem);
+  font-weight: var(--text-text-md-medium-font-weight, 500);
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.ScMappingCard_ignoreBtn {
+  background: transparent;
+  border: 1.25px solid var(--alias-border-default, #3e3e3e);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScMappingCard_whiteBtn {
+  background: var(--alias-fill-base-base, #f5f5f5);
+  color: var(--alias-text-and-icons-inverse, #101010);
+}
+.ScMappingCard_confirmBtn {
+  flex: 1 1 auto;
+}
+.ScMappingCard_statusLabel {
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-md, 8px);
+  white-space: nowrap;
+  font-family: var(--text-text-sm-medium-font-family, "Inter-Medium", sans-serif);
+  font-size: var(--text-text-sm-medium-font-size, 0.875rem);
+  line-height: var(--text-text-sm-medium-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-medium-font-weight, 500);
+}
+.ScMappingCard_statusIcon {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+}
+.ScMappingCard_statusSuccess {
+  color: var(--alias-text-and-icons-success, #00b96b);
+}
+.ScMappingCard_statusError {
+  color: var(--alias-text-and-icons-error, #d11a1a);
+}
+.ScMappingCard_validityText {
+  width: 100%;
+  text-align: left;
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  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);
+}
+
 /* src/SC-ThinkingStepIcon/ScThinkingStepIcon.module.css */
 .ScThinkingStepIcon_scThinkingStepIcon,
 .ScThinkingStepIcon_scThinkingStepIcon * {