@streamoid/ui 0.2.5 → 0.2.7

package/README.md

@@ -35,10 +35,11 @@ function App() {
 
 ## Features
 
-- 50+ Reusable Components
+- 60+ Reusable Components (desktop + mobile)
 - TypeScript Support
-- Tailwind CSS Compatible
-- Fully Customizable
+- CSS Modules with Design Tokens
+- Controlled & Uncontrolled component patterns
+- Mobile-first components for Teams, Settings, Billing, Workspace
 
 ## License
 

package/dist/index.css

@@ -1131,6 +1131,8 @@
   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;
 }
 .ScPairtext_scPairtext.ScPairtext_icon-position-left .ScPairtext_scCheckboxInstance,
 .ScPairtext_scPairtext.ScPairtext_icon-position-left .ScPairtext_scRadioInstance,
@@ -2707,6 +2709,17 @@
   flex-shrink: 0 !important;
   height: 1.5rem !important;
 }
+.ScProfileImageUpdate_profileInitials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--alias-fill-neutral-neutralselected, #242424);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-xxl, 1.75rem);
+  font-weight: 500;
+  line-height: var(--line-height-line-height-xxl, 2.25rem);
+}
 .ScProfileImageUpdate_siconUploadInstance {
   width: 1.25rem !important;
   height: 1.25rem !important;
@@ -3062,7 +3075,7 @@
   gap: var(--spacing-xs, 0.25rem);
   align-items: flex-start;
   justify-content: center;
-  width: 20rem;
+  width: 100%;
   position: relative;
 }
 .ScTextField_scTextField.ScTextField_label-group-none {
@@ -3148,11 +3161,15 @@
 .ScTextField_scTextField.ScTextField_state-filled .ScTextField_inputText {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
-.ScTextField_scTextField.ScTextField_state-ative-focused .ScTextField_inputContainer {
+.ScTextField_scTextField.ScTextField_state-active .ScTextField_inputContainer {
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
   border-style: solid;
   border-color: var(--alias-border-strong, #5c5c5c);
   border-width: 0.0625rem;
 }
+.ScTextField_scTextField.ScTextField_state-active .ScTextField_inputText {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
 .ScTextField_ScTextField_labelContainer,
 .ScTextField_scTextField.ScTextField_label-group-none .ScTextField_labelContainer {
   display: none;
@@ -4024,7 +4041,7 @@
   gap: var(--spacing-xs, 0.25rem);
   align-items: flex-start;
   justify-content: center;
-  width: 20rem;
+  width: 100%;
   position: relative;
 }
 .ScOnlyField_inputContainer {
@@ -4113,7 +4130,7 @@
   gap: var(--spacing-xs, 0.25rem);
   align-items: flex-start;
   justify-content: center;
-  width: 20rem;
+  width: 100%;
   position: relative;
 }
 .ScCheckField_labelContainer {
@@ -4455,7 +4472,7 @@
   gap: var(--spacing-xs, 0.25rem);
   align-items: flex-start;
   justify-content: center;
-  width: 20rem;
+  width: 100%;
   position: relative;
 }
 .ScTabField_labelContainer {
@@ -5691,149 +5708,149 @@
   margin: 0;
 }
 
-/* src/SC-InvoiceHistory-Mobile/ScInvoiceHistoryMobile.module.css */
-.ScInvoiceHistoryMobile_scInvoiceHistoryMobile {
+/* src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.module.css */
+.InvoiceHistoryMobile_invoiceHistoryMobile,
+.InvoiceHistoryMobile_invoiceHistoryMobile * {
+  box-sizing: border-box;
+}
+.InvoiceHistoryMobile_invoiceHistoryMobile {
   display: flex;
+  gap: var(--spacing-xl, 0.75rem);
   align-items: flex-start;
-  gap: var(--spacing-xl, 12px);
-  padding: var(--spacing-3xl, 16px);
+  padding: var(--spacing-3xl, 1rem);
   border-bottom: 0.5px solid var(--alias-border-divider, #242424);
+  position: relative;
   width: 100%;
-  box-sizing: border-box;
-}
-.ScInvoiceHistoryMobile_scInvoiceHistoryMobile * {
-  box-sizing: border-box;
 }
-.ScInvoiceHistoryMobile_invoiceInfo {
+.InvoiceHistoryMobile_info {
   display: flex;
   flex-direction: column;
-  flex: 1 0 0;
+  gap: var(--spacing-xs, 0.25rem);
+  align-items: flex-start;
+  flex: 1;
   min-width: 0;
-  gap: var(--spacing-xs, 4px);
 }
-.ScInvoiceHistoryMobile_invoiceNumber {
+.InvoiceHistoryMobile_invoiceId {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-regular, 400);
-  font-size: 16px;
-  line-height: var(--line-height-line-height-md, 24px);
-  color: var(--alias-text-icons-primary, #f5f5f5);
+  font-size: var(--font-size-font-size-md, 1rem);
+  line-height: var(--line-height-line-height-md, 1.5rem);
+  font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin: 0;
   width: 100%;
 }
-.ScInvoiceHistoryMobile_date {
+.InvoiceHistoryMobile_date {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-regular, 400);
-  font-size: 14px;
-  line-height: var(--line-height-line-height-sm, 20px);
-  color: var(--alias-text-icons-tertiary, #9e9e9e);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin: 0;
   width: 100%;
 }
-.ScInvoiceHistoryMobile_amount {
+.InvoiceHistoryMobile_amount {
+  color: var(--alias-text-and-icons-success, #00b96b);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-semibold, 600);
-  font-size: 16px;
-  line-height: var(--line-height-line-height-md, 24px);
-  color: var(--alias-text-icons-success, #00b96b);
+  font-size: var(--font-size-font-size-md, 1rem);
+  line-height: var(--line-height-line-height-md, 1.5rem);
+  font-weight: 600;
   text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  margin: 0;
 }
 
-/* src/SC-UsageHistory-Mobile/ScUsageHistoryMobile.module.css */
-.ScUsageHistoryMobile_scUsageHistoryMobile {
+/* src/SC-UsageHistoryMobile/UsageHistoryMobile.module.css */
+.UsageHistoryMobile_usageHistoryMobile,
+.UsageHistoryMobile_usageHistoryMobile * {
+  box-sizing: border-box;
+}
+.UsageHistoryMobile_usageHistoryMobile {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs, 4px);
+  gap: var(--spacing-xs, 0.25rem);
   align-items: flex-start;
-  padding: var(--spacing-3xl, 16px);
+  padding: var(--spacing-3xl, 1rem);
   border-bottom: 0.5px solid var(--alias-border-divider, #242424);
+  position: relative;
   width: 100%;
-  box-sizing: border-box;
-}
-.ScUsageHistoryMobile_scUsageHistoryMobile * {
-  box-sizing: border-box;
 }
-.ScUsageHistoryMobile_topRow {
+.UsageHistoryMobile_row1 {
   display: flex;
+  gap: var(--spacing-xl, 0.75rem);
   align-items: center;
-  gap: var(--spacing-xl, 12px);
   width: 100%;
 }
-.ScUsageHistoryMobile_title {
-  flex: 1 0 0;
+.UsageHistoryMobile_serviceName {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-regular, 400);
-  font-size: var(--font-size-font-size-sm, 14px);
-  line-height: var(--line-height-line-height-sm, 20px);
-  color: var(--alias-text-icons-primary, #f5f5f5);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin: 0;
-  min-width: 0;
 }
-.ScUsageHistoryMobile_usageCount {
+.UsageHistoryMobile_credits {
+  color: var(--alias-text-and-icons-error, #d11a1a);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-semibold, 600);
-  font-size: 16px;
-  line-height: var(--line-height-line-height-md, 24px);
-  color: var(--alias-text-icons-error, #d11a1a);
+  font-size: var(--font-size-font-size-md, 1rem);
+  line-height: var(--line-height-line-height-md, 1.5rem);
+  font-weight: 600;
   text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  margin: 0;
 }
-.ScUsageHistoryMobile_bottomRow {
+.UsageHistoryMobile_row2 {
   display: flex;
+  gap: var(--spacing-xl, 0.75rem);
   align-items: center;
-  gap: var(--spacing-xl, 12px);
   width: 100%;
 }
-.ScUsageHistoryMobile_metaInfo {
+.UsageHistoryMobile_metaLeft {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-lg, 9px);
-  flex: 1 0 0;
+  flex: 1;
   min-width: 0;
+  gap: 9px;
+  align-items: center;
 }
-.ScUsageHistoryMobile_metaText {
+.UsageHistoryMobile_metaText {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-regular, 400);
-  font-size: 14px;
-  line-height: var(--line-height-line-height-sm, 20px);
-  color: var(--alias-text-icons-tertiary, #9e9e9e);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  margin: 0;
 }
-.ScUsageHistoryMobile_vDivider {
+.UsageHistoryMobile_divider {
   width: 0;
-  height: 12px;
-  border-left: 0.5px solid var(--alias-border-subtle, #242424);
+  height: 0.75rem;
   flex-shrink: 0;
+  border-left: 0.5px solid var(--alias-border-divider, #242424);
 }
-.ScUsageHistoryMobile_totalCount {
+.UsageHistoryMobile_balance {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-regular, 400);
-  font-size: 14px;
-  line-height: var(--line-height-line-height-sm, 20px);
-  color: var(--alias-text-icons-tertiary, #9e9e9e);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
   text-align: right;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  margin: 0;
 }
 
 /* src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.module.css */
@@ -5844,7 +5861,7 @@
   padding: var(--spacing-xs, 4px) var(--spacing-xl, 12px) var(--spacing-xs, 4px) var(--spacing-xs, 4px);
   border-radius: var(--radius-3xl, 16px);
   border: 0.5px solid;
-  width: 326px;
+  width: 100%;
   box-sizing: border-box;
 }
 .ScWorkspaceSwitchMobileV2_scWorkspaceSwitchMobileV2 * {
@@ -5858,6 +5875,11 @@
   background: var(--alias-surface-base, #101010);
   border-color: var(--alias-border-subtle, #242424);
 }
+.ScWorkspaceSwitchMobileV2_type-display {
+  background: var(--alias-surface-base, #101010);
+  border: none;
+  padding: 0;
+}
 .ScWorkspaceSwitchMobileV2_workspaceInfo {
   display: flex;
   flex: 1 0 0;
@@ -5868,35 +5890,8 @@
 .ScWorkspaceSwitchMobileV2_dpContainer {
   display: flex;
   align-items: center;
-  align-self: stretch;
   flex-shrink: 0;
 }
-.ScWorkspaceSwitchMobileV2_dp {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-  height: 100%;
-  padding: var(--spacing-none, 0px);
-  border-radius: var(--radius-xl, 12px);
-}
-.ScWorkspaceSwitchMobileV2_dp-currentWS {
-  background: var(--alias-fill-neutral-neutralactive, #313131);
-}
-.ScWorkspaceSwitchMobileV2_dp-otherWS {
-  background: var(--alias-fill-neutral-neutralselected, #242424);
-}
-.ScWorkspaceSwitchMobileV2_dpText {
-  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
-  font-weight: var(--font-weight-font-weight-medium, 500);
-  font-size: var(--font-size-font-size-md, 16px);
-  line-height: var(--line-height-line-height-md, 24px);
-  color: var(--alias-text-icons-primary, #f5f5f5);
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .ScWorkspaceSwitchMobileV2_textContainer {
   display: flex;
   flex-direction: column;
@@ -5933,6 +5928,9 @@
   white-space: nowrap;
   flex-shrink: 0;
 }
+.ScWorkspaceSwitchMobileV2_roleMember {
+  color: var(--alias-text-icons-info, #155cd6);
+}
 .ScWorkspaceSwitchMobileV2_dot {
   width: 16px;
   height: 16px;
@@ -5972,3 +5970,322 @@
   flex: 1 0 0;
   min-width: 0;
 }
+
+/* src/SC-imageField/ScImageField.module.css */
+.ScImageField_scImageField,
+.ScImageField_scImageField * {
+  box-sizing: border-box;
+}
+.ScImageField_scImageField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+}
+.ScImageField_labelContainer {
+  display: flex;
+  gap: var(--spacing-3xl, 0);
+  height: 1.5rem;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.ScImageField_label {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  text-align: left;
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+}
+.ScImageField_uploadArea {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border-radius: var(--radius-3xl, 1rem);
+  display: flex;
+  gap: var(--spacing-md, 0.5rem);
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  height: 7.5rem;
+  position: relative;
+  cursor: pointer;
+}
+.ScImageField_uploadIcon {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  flex-shrink: 0;
+}
+.ScImageField_uploadText {
+  color: var(--alias-text-and-icons-secondary, #dadada);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
+  text-align: center;
+  flex-shrink: 0;
+}
+.ScImageField_previewArea {
+  background: var(--alias-fill-neutral-neutralplus, #151515);
+  border-radius: var(--radius-3xl, 1rem);
+  display: flex;
+  gap: var(--spacing-md, 0.5rem);
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  height: 7.5rem;
+  padding: var(--spacing-3xl, 1rem) var(--spacing-xl, 0.75rem);
+  position: relative;
+}
+.ScImageField_previewImage {
+  height: 100%;
+  aspect-ratio: 1;
+  border-radius: var(--radius-md, 0.5rem);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.ScImageField_fileName {
+  color: var(--alias-text-and-icons-secondary, #dadada);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ScImageField_removeIcon {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* src/SC-settingsTabComp/ScSettingsTabComp.module.css */
+.ScSettingsTabComp_scSettingsTabComp,
+.ScSettingsTabComp_scSettingsTabComp * {
+  box-sizing: border-box;
+}
+.ScSettingsTabComp_scSettingsTabComp {
+  display: flex;
+  height: 3.5rem;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl, 0.75rem);
+  position: relative;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.ScSettingsTabComp_tabText {
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-md, 1rem);
+  line-height: var(--line-height-line-height-md, 1.5rem);
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  position: relative;
+  flex-shrink: 0;
+}
+.ScSettingsTabComp_scSettingsTabComp.ScSettingsTabComp_active-true {
+  border-bottom: 1.25px solid var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScSettingsTabComp_scSettingsTabComp.ScSettingsTabComp_active-true .ScSettingsTabComp_tabText {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+}
+.ScSettingsTabComp_scSettingsTabComp.ScSettingsTabComp_active-false .ScSettingsTabComp_tabText {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+}
+
+/* src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.module.css */
+.ScCreditsUsageCardMobile_scCreditsUsageCardMobile,
+.ScCreditsUsageCardMobile_scCreditsUsageCardMobile * {
+  box-sizing: border-box;
+}
+.ScCreditsUsageCardMobile_scCreditsUsageCardMobile {
+  backdrop-filter: blur(4px);
+  background: var(--alias-surface-base, #101010);
+  border-radius: var(--radius-3xl, 1rem);
+  border: 1px solid var(--alias-border-subtle, #242424);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: flex-start;
+  padding: var(--spacing-3xl, 1rem);
+  position: relative;
+  width: 100%;
+}
+.ScCreditsUsageCardMobile_header {
+  display: flex;
+  gap: var(--gp8, 0.5rem);
+  height: 1.5rem;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+.ScCreditsUsageCardMobile_headerIcon {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  flex-shrink: 0;
+}
+.ScCreditsUsageCardMobile_headerLabel {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ScCreditsUsageCardMobile_divider {
+  height: 0;
+  width: 100%;
+  flex-shrink: 0;
+  border-top: 0.5px solid var(--alias-border-divider, #242424);
+}
+.ScCreditsUsageCardMobile_usageInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+.ScCreditsUsageCardMobile_usageText {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-lg, 1.125rem);
+  line-height: var(--line-height-line-height-lg, 1.625rem);
+  font-weight: 500;
+  width: 100%;
+}
+.ScCreditsUsageCardMobile_remainingText {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 500;
+  width: 100%;
+}
+.ScCreditsUsageCardMobile_scButtonInstance {
+  width: 100% !important;
+  flex-shrink: 0 !important;
+}
+
+/* src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.module.css */
+.ScPlanDetailsCardMobile_scPlanDetailsCardMobile,
+.ScPlanDetailsCardMobile_scPlanDetailsCardMobile * {
+  box-sizing: border-box;
+}
+.ScPlanDetailsCardMobile_scPlanDetailsCardMobile {
+  backdrop-filter: blur(4px);
+  background: var(--alias-surface-base, #101010);
+  border-radius: var(--radius-3xl, 1rem);
+  border: 1px solid var(--alias-border-subtle, #242424);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl, 1rem);
+  align-items: flex-start;
+  padding: var(--spacing-3xl, 1rem);
+  position: relative;
+  width: 100%;
+}
+.ScPlanDetailsCardMobile_planHeader {
+  display: flex;
+  gap: var(--spacing-md, 0.5rem);
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+.ScPlanDetailsCardMobile_headerLeft {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: var(--gp8, 0.5rem);
+  align-items: center;
+}
+.ScPlanDetailsCardMobile_headerIcon {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  flex-shrink: 0;
+}
+.ScPlanDetailsCardMobile_headerLabel {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 400;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ScPlanDetailsCardMobile_divider {
+  height: 0;
+  width: 100%;
+  flex-shrink: 0;
+  border-top: 0.5px solid var(--alias-border-divider, #242424);
+}
+.ScPlanDetailsCardMobile_planInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-none, 0);
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+.ScPlanDetailsCardMobile_planNameRow {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.ScPlanDetailsCardMobile_planName {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-lg, 1.125rem);
+  line-height: var(--line-height-line-height-lg, 1.625rem);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.ScPlanDetailsCardMobile_dot {
+  width: 1.5rem;
+  height: 1.5rem;
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ScPlanDetailsCardMobile_dot::after {
+  content: "";
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-full, 999px);
+  background: var(--alias-text-and-icons-tertiary, #9e9e9e);
+}
+.ScPlanDetailsCardMobile_planPrice {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 500;
+  width: 100%;
+}
+.ScPlanDetailsCardMobile_scBadgesInstance {
+  flex-shrink: 0 !important;
+}
+.ScPlanDetailsCardMobile_scButtonInstance {
+  width: 100% !important;
+  flex-shrink: 0 !important;
+}