@streamoid/ui 0.2.0 → 0.2.2

package/dist/index.css

@@ -1279,7 +1279,8 @@
 .ScButton_scButton.ScButton_state-disabled.ScButton_type-primary.ScButton_variant-error {
   background: var(--alias-fill-error-solidactive, #b01717);
 }
-.ScButton_scButton.ScButton_type-primary.ScButton_variant-error .ScButton_label {
+.ScButton_scButton.ScButton_type-primary.ScButton_variant-error .ScButton_label,
+.ScButton_scButton.ScButton_type-primary.ScButton_variant-error .ScButton_container {
   color: var(--alias-text-and-icons-fullwhite, #ffffff);
 }
 .ScButton_scButton.ScButton_type-secondary {
@@ -1291,7 +1292,8 @@
 .ScButton_scButton.ScButton_state-disabled.ScButton_type-secondary {
   background: var(--alias-fill-error-secondary, #1c0404);
 }
-.ScButton_scButton.ScButton_type-secondary .ScButton_label {
+.ScButton_scButton.ScButton_type-secondary .ScButton_label,
+.ScButton_scButton.ScButton_type-secondary .ScButton_container {
   color: var(--alias-text-and-icons-errorcont, #eb6b6b);
 }
 .ScButton_scButton.ScButton_type-secondary:hover,
@@ -1313,7 +1315,9 @@
   color: var(--alias-text-and-icons-inverse, #101010);
 }
 .ScButton_scButton.ScButton_variant-tertiary .ScButton_label,
-.ScButton_scButton.ScButton_variant-outline .ScButton_label {
+.ScButton_scButton.ScButton_variant-outline .ScButton_label,
+.ScButton_scButton.ScButton_variant-tertiary .ScButton_container,
+.ScButton_scButton.ScButton_variant-outline .ScButton_container {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
 .ScButton_scButton.ScButton_state-default.ScButton_variant-tertiary,
@@ -1324,7 +1328,8 @@
 .ScButton_scButton.ScButton_state-disabled.ScButton_variant-outline {
   background: unset;
 }
-.ScButton_scButton.ScButton_type-tertiary .ScButton_label {
+.ScButton_scButton.ScButton_type-tertiary .ScButton_label,
+.ScButton_scButton.ScButton_type-tertiary .ScButton_container {
   color: var(--alias-text-and-icons-error, #d11a1a);
 }
 .ScButton_scButton.ScButton_type-tertiary:hover,
@@ -1576,11 +1581,15 @@
   background-repeat: repeat;
 }
 .ScButton_scButton.ScButton_state-default.ScButton_variant-primary.ScButton_type-primary .ScButton_label,
-.ScButton_scButton.ScButton_state-disabled.ScButton_variant-primary.ScButton_type-primary .ScButton_label {
+.ScButton_scButton.ScButton_state-disabled.ScButton_variant-primary.ScButton_type-primary .ScButton_label,
+.ScButton_scButton.ScButton_state-default.ScButton_variant-primary.ScButton_type-primary .ScButton_container,
+.ScButton_scButton.ScButton_state-disabled.ScButton_variant-primary.ScButton_type-primary .ScButton_container {
   color: #fffafa;
 }
 .ScButton_scButton.ScButton_variant-primary.ScButton_type-primary:hover .ScButton_label,
-.ScButton_scButton.ScButton_state-hover.ScButton_variant-primary.ScButton_type-primary .ScButton_label {
+.ScButton_scButton.ScButton_state-hover.ScButton_variant-primary.ScButton_type-primary .ScButton_label,
+.ScButton_scButton.ScButton_variant-primary.ScButton_type-primary:hover .ScButton_container,
+.ScButton_scButton.ScButton_state-hover.ScButton_variant-primary.ScButton_type-primary .ScButton_container {
   color: #fffafa;
 }
 .ScButton_scButton.ScButton_variant-primary.ScButton_type-primary:hover,
@@ -1991,6 +2000,64 @@
   position: relative;
 }
 
+/* src/SC-Dp/ScDp.module.css */
+.ScDp_scDp,
+.ScDp_scDp * {
+  box-sizing: border-box;
+}
+.ScDp_scDp {
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+}
+.ScDp_variantWorkspace {
+  border-radius: var(--radius-md, 8px);
+}
+.ScDp_variantProfile {
+  border-radius: var(--radius-full, 999px);
+}
+.ScDp_typeInitial {
+  background: var(--alias-fill-neutral-neutralselected, #242424);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-none, 0px);
+}
+.ScDp_initials {
+  flex: 1;
+  min-width: 0;
+  min-height: 1px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  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-md, 1rem);
+  font-weight: 500;
+  line-height: var(--line-height-line-height-md, 1.5rem);
+}
+.ScDp_image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+.ScDp_imageWorkspace {
+  border-radius: var(--radius-md, 8px);
+}
+.ScDp_imageProfile {
+  border-radius: var(--radius-full, 999px);
+}
+
 /* src/SC-Google sign in/ScGoogleSignIn.module.css */
 .ScGoogleSignIn_scGoogleSignIn,
 .ScGoogleSignIn_scGoogleSignIn * {
@@ -4639,3 +4706,128 @@
 .ScWorkspaceCard_scWorkspaceCard.ScWorkspaceCard_current-workspace-false .ScWorkspaceCard_scButtonInstance2 {
   width: unset !important;
 }
+
+/* src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css */
+.ScWorkspaceSwitchCard_card,
+.ScWorkspaceSwitchCard_card * {
+  box-sizing: border-box;
+}
+.ScWorkspaceSwitchCard_card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-3xl, 1rem);
+  border-style: solid;
+  border-width: 0.5px;
+  padding: var(--spacing-xs, 4px) var(--spacing-3xl, 16px) var(--spacing-xs, 4px) var(--spacing-xs, 4px);
+  gap: var(--spacing-3xl, 16px);
+  transition: background-color 0.15s ease;
+}
+.ScWorkspaceSwitchCard_cardCurrent {
+  background: var(--alias-surface-raised, #242424);
+  border-color: var(--alias-border-default, #3e3e3e);
+  cursor: default;
+}
+.ScWorkspaceSwitchCard_cardOther {
+  background: var(--alias-surface-base, #101010);
+  border-color: var(--alias-border-subtle, #242424);
+  cursor: pointer;
+}
+.ScWorkspaceSwitchCard_cardOtherHover {
+  background: var(--alias-surface-basesubtle, #151515);
+}
+.ScWorkspaceSwitchCard_wsInfo {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  gap: var(--spacing-3xl, 16px);
+  min-width: 0;
+  min-height: 1px;
+}
+.ScWorkspaceSwitchCard_dp {
+  width: 90px !important;
+  height: 90px !important;
+}
+.ScWorkspaceSwitchCard_infoCol {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  min-width: 0;
+  min-height: 1px;
+  align-items: flex-start;
+  padding: var(--spacing-md, 8px) 0;
+  gap: var(--spacing-xl, 12px);
+}
+.ScWorkspaceSwitchCard_wsName {
+  margin: 0;
+  width: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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-md, 1rem);
+  font-weight: 500;
+  line-height: var(--line-height-line-height-md, 1.5rem);
+}
+.ScWorkspaceSwitchCard_detailsRow {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+  gap: var(--spacing-5xl, 20px);
+}
+.ScWorkspaceSwitchCard_detailItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.ScWorkspaceSwitchCard_detailItemFlex {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  flex: 1 0 0;
+  min-width: 0;
+  min-height: 1px;
+  white-space: nowrap;
+}
+.ScWorkspaceSwitchCard_detailLabel {
+  color: var(--alias-text-and-icons-disabled, #5c5c5c);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-xs, 0.75rem);
+  font-weight: 400;
+  line-height: var(--line-height-line-height-xs, 1.125rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ScWorkspaceSwitchCard_detailValueRole {
+  color: var(--alias-text-and-icons-warning, #db8b00);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  font-weight: 500;
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+}
+.ScWorkspaceSwitchCard_detailValueSecondary {
+  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);
+  font-weight: 400;
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+.ScWorkspaceSwitchCard_vDivider {
+  width: 1px !important;
+  height: 24px !important;
+  flex-shrink: 0 !important;
+}
+.ScWorkspaceSwitchCard_btnIcon {
+  width: 1rem !important;
+  height: 1rem !important;
+}

package/dist/index.d.mts

@@ -91,9 +91,9 @@ interface IScCreditsUsageCardProps extends React.HTMLAttributes<HTMLDivElement>
 declare const ScCreditsUsageCard: ({ usageLabel, usageText, remainingText, buyButtonText, buyButtonState, onBuyClick, progress, className, ...props }: IScCreditsUsageCardProps) => JSX.Element;
 
 interface ScDpProps {
-    /** Show initials text or an image. Defaults to "initial". */
+    /** "initial" shows initials text, "image" shows an image. */
     type?: "initial" | "image";
-    /** Circle for profile, rounded rect for workspace. Defaults to "workspace". */
+    /** "workspace" = rounded rect, "profile" = circle. */
     variant?: "workspace" | "profile";
     /** Initials text (used when type="initial", or as fallback when image fails). */
     initial?: string;
@@ -566,18 +566,21 @@ interface IScWorkspaceCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const ScWorkspaceCard: ({ workspaceName, role, userCount, ownerEmail, buttonText, className, ...props }: IScWorkspaceCardProps) => JSX.Element;
 
-interface ScWorkspaceSwitchCardProps {
-    name: string;
-    initials?: string;
-    imageUrl?: string;
+interface NscWorkspaceSwitchProps {
+    wsName?: string;
     role?: string;
     plan?: string;
-    ownerEmail?: string;
-    isCurrent?: boolean;
+    ownerId?: string;
+    initials?: string;
+    imageUrl?: string;
+    type?: "currentWS" | "otherWS";
     variant?: "switch" | "settings";
+    hover?: boolean;
+    className?: string;
     onSwitch?: () => void;
     onSettings?: () => void;
 }
-declare function ScWorkspaceSwitchCard({ name, initials, imageUrl, role, plan, ownerEmail, isCurrent, variant, onSwitch, onSettings, }: ScWorkspaceSwitchCardProps): react_jsx_runtime.JSX.Element;
+declare function NscWorkspaceSwitch({ wsName, role, plan, ownerId, initials, imageUrl, type, variant, hover, className, onSwitch, onSettings, }: NscWorkspaceSwitchProps): react_jsx_runtime.JSX.Element;
+declare const ScWorkspaceSwitchCard: typeof NscWorkspaceSwitch;
 
-export { type IScAccessProps, type IScAppCardProps, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScHDividerProps, type IScHeaderProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleProps, type IScSettingsNavProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, type PlanFeatureSection, ScAccess, ScAppCard, ScAppField, ScAppListingCard, ScArtifaxInvite, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScHDivider, ScHeader, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralTableHeader, ScReferralTableList, ScRole, ScSettingsNav, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSwitchCard, type ScWorkspaceSwitchCardProps, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };
+export { type IScAccessProps, type IScAppCardProps, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScHDividerProps, type IScHeaderProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleProps, type IScSettingsNavProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, NscWorkspaceSwitch, type NscWorkspaceSwitchProps, type PlanFeatureSection, ScAccess, ScAppCard, ScAppField, ScAppListingCard, ScArtifaxInvite, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScHDivider, ScHeader, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralTableHeader, ScReferralTableList, ScRole, ScSettingsNav, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSwitchCard, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };

package/dist/index.d.ts

@@ -91,9 +91,9 @@ interface IScCreditsUsageCardProps extends React.HTMLAttributes<HTMLDivElement>
 declare const ScCreditsUsageCard: ({ usageLabel, usageText, remainingText, buyButtonText, buyButtonState, onBuyClick, progress, className, ...props }: IScCreditsUsageCardProps) => JSX.Element;
 
 interface ScDpProps {
-    /** Show initials text or an image. Defaults to "initial". */
+    /** "initial" shows initials text, "image" shows an image. */
     type?: "initial" | "image";
-    /** Circle for profile, rounded rect for workspace. Defaults to "workspace". */
+    /** "workspace" = rounded rect, "profile" = circle. */
     variant?: "workspace" | "profile";
     /** Initials text (used when type="initial", or as fallback when image fails). */
     initial?: string;
@@ -566,18 +566,21 @@ interface IScWorkspaceCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const ScWorkspaceCard: ({ workspaceName, role, userCount, ownerEmail, buttonText, className, ...props }: IScWorkspaceCardProps) => JSX.Element;
 
-interface ScWorkspaceSwitchCardProps {
-    name: string;
-    initials?: string;
-    imageUrl?: string;
+interface NscWorkspaceSwitchProps {
+    wsName?: string;
     role?: string;
     plan?: string;
-    ownerEmail?: string;
-    isCurrent?: boolean;
+    ownerId?: string;
+    initials?: string;
+    imageUrl?: string;
+    type?: "currentWS" | "otherWS";
     variant?: "switch" | "settings";
+    hover?: boolean;
+    className?: string;
     onSwitch?: () => void;
     onSettings?: () => void;
 }
-declare function ScWorkspaceSwitchCard({ name, initials, imageUrl, role, plan, ownerEmail, isCurrent, variant, onSwitch, onSettings, }: ScWorkspaceSwitchCardProps): react_jsx_runtime.JSX.Element;
+declare function NscWorkspaceSwitch({ wsName, role, plan, ownerId, initials, imageUrl, type, variant, hover, className, onSwitch, onSettings, }: NscWorkspaceSwitchProps): react_jsx_runtime.JSX.Element;
+declare const ScWorkspaceSwitchCard: typeof NscWorkspaceSwitch;
 
-export { type IScAccessProps, type IScAppCardProps, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScHDividerProps, type IScHeaderProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleProps, type IScSettingsNavProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, type PlanFeatureSection, ScAccess, ScAppCard, ScAppField, ScAppListingCard, ScArtifaxInvite, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScHDivider, ScHeader, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralTableHeader, ScReferralTableList, ScRole, ScSettingsNav, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSwitchCard, type ScWorkspaceSwitchCardProps, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };
+export { type IScAccessProps, type IScAppCardProps, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScHDividerProps, type IScHeaderProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleProps, type IScSettingsNavProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, NscWorkspaceSwitch, type NscWorkspaceSwitchProps, type PlanFeatureSection, ScAccess, ScAppCard, ScAppField, ScAppListingCard, ScArtifaxInvite, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScHDivider, ScHeader, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralTableHeader, ScReferralTableList, ScRole, ScSettingsNav, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSwitchCard, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  NscWorkspaceSwitch: () => NscWorkspaceSwitch,
   ScAccess: () => ScAccess,
   ScAppCard: () => ScAppCard,
   ScAppField: () => ScAppField,
@@ -621,6 +622,8 @@ var ScButton = ({
     ctx.putImageData(imageData, 0, 0);
     return canvas.toDataURL("image/png");
   }, [variant, type, state]);
+  const strokeWidth = size === "sm" ? 1.25 : 1.5;
+  const styledIcon = (0, import_react.isValidElement)(icon) ? (0, import_react.cloneElement)(icon, { color: "currentColor", strokeWidth }) : icon;
   const variantsClassName = ScButton_default["style-variant-" + styleVariant] + " " + ScButton_default["state-" + state] + " " + ScButton_default["variant-" + variant] + " " + ScButton_default["type-" + type] + " " + ScButton_default["size-" + size];
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
@@ -636,12 +639,12 @@ var ScButton = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: ScButton_default.container, children: [
-          (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: icon }),
+          (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: styledIcon }),
           (styleVariant === "default" || styleVariant === "icon-right" || styleVariant === "icon-left") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: ScButton_default.label, children: [
             text,
             " "
           ] }) }),
-          styleVariant === "icon-right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: icon })
+          styleVariant === "icon-right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: styledIcon })
         ] })
       ]
     }
@@ -960,6 +963,20 @@ var ScCreditsUsageCard = ({
 
 // src/SC-Dp/ScDp.tsx
 var import_react2 = require("react");
+
+// src/SC-Dp/ScDp.module.css
+var ScDp_default = {
+  scDp: "ScDp_scDp",
+  variantWorkspace: "ScDp_variantWorkspace",
+  variantProfile: "ScDp_variantProfile",
+  typeInitial: "ScDp_typeInitial",
+  initials: "ScDp_initials",
+  image: "ScDp_image",
+  imageWorkspace: "ScDp_imageWorkspace",
+  imageProfile: "ScDp_imageProfile"
+};
+
+// src/SC-Dp/ScDp.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function ScDp({
   type = "initial",
@@ -972,61 +989,27 @@ function ScDp({
 }) {
   const [imageFailed, setImageFailed] = (0, import_react2.useState)(false);
   const isProfile = variant === "profile";
-  const borderRadius = isProfile ? "var(--radius-full)" : "var(--radius-md)";
   const showImage = type === "image" && imageUrl && !imageFailed;
-  const containerStyle = {
+  const containerClass = [
+    ScDp_default.scDp,
+    isProfile ? ScDp_default.variantProfile : ScDp_default.variantWorkspace,
+    !showImage ? ScDp_default.typeInitial : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  const sizeStyle = {
     width: size,
     height: size,
-    borderRadius,
-    position: "relative",
-    overflow: "hidden",
-    flexShrink: 0,
-    ...showImage ? {} : {
-      backgroundColor: "var(--alias-fill-neutral-neutralselected)",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className, style: containerStyle, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: containerClass, style: sizeStyle, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "img",
     {
       src: imageUrl,
       alt: "",
-      style: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        pointerEvents: "none"
-      },
+      className: ScDp_default.image + " " + (isProfile ? ScDp_default.imageProfile : ScDp_default.imageWorkspace),
       onError: () => setImageFailed(true)
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "div",
-    {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        minHeight: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        color: "var(--alias-text---icons-primary)",
-        fontFamily: "var(--font-family-font-family-body)",
-        fontSize: size <= 32 ? `${size * 0.4}px` : "var(--font-size-font-size-md)",
-        fontWeight: 500,
-        lineHeight: 1,
-        textAlign: "center"
-      },
-      children: initial
-    }
-  ) });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: ScDp_default.initials, children: initial }) });
 }
 
 // src/SC-Google sign in/ScGoogleSignIn.module.css
@@ -4445,220 +4428,125 @@ var ScWorkspaceCard = ({
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
 var import_react5 = require("react");
 var import_icons53 = require("@streamoid/icons");
+
+// src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
+var ScWorkspaceSwitchCard_default = {
+  card: "ScWorkspaceSwitchCard_card",
+  cardCurrent: "ScWorkspaceSwitchCard_cardCurrent",
+  cardOther: "ScWorkspaceSwitchCard_cardOther",
+  cardOtherHover: "ScWorkspaceSwitchCard_cardOtherHover",
+  wsInfo: "ScWorkspaceSwitchCard_wsInfo",
+  dp: "ScWorkspaceSwitchCard_dp",
+  infoCol: "ScWorkspaceSwitchCard_infoCol",
+  wsName: "ScWorkspaceSwitchCard_wsName",
+  detailsRow: "ScWorkspaceSwitchCard_detailsRow",
+  detailItem: "ScWorkspaceSwitchCard_detailItem",
+  detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
+  detailLabel: "ScWorkspaceSwitchCard_detailLabel",
+  detailValueRole: "ScWorkspaceSwitchCard_detailValueRole",
+  detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
+  vDivider: "ScWorkspaceSwitchCard_vDivider",
+  btnIcon: "ScWorkspaceSwitchCard_btnIcon"
+};
+
+// src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
-function deriveInitials2(name) {
-  return name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
-}
-function DotSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    "div",
-    {
-      style: { width: 24, height: 24, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        "div",
-        {
-          style: {
-            width: 4,
-            height: 4,
-            borderRadius: "50%",
-            backgroundColor: "var(--alias-text---icons-disabled)"
-          }
-        }
-      )
-    }
-  );
-}
-function ScWorkspaceSwitchCard({
-  name,
+function NscWorkspaceSwitch({
+  wsName = "Workspace name is kepler",
+  role = "Admin",
+  plan = "Free",
+  ownerId = "rohan@streamoid.com",
   initials,
   imageUrl,
-  role,
-  plan,
-  ownerEmail,
-  isCurrent = false,
+  type = "currentWS",
   variant = "switch",
+  hover,
+  className,
   onSwitch,
   onSettings
 }) {
-  const [hovered, setHovered] = (0, import_react5.useState)(false);
-  const showButtons = !isCurrent && hovered;
-  const cardBg = isCurrent ? "var(--alias-surface-raised)" : hovered ? "var(--alias-surface-basesubtle)" : "var(--alias-surface-base)";
-  const displayInitials = initials || deriveInitials2(name);
-  const isAdmin = role?.toLowerCase() === "admin";
-  const roleText = isAdmin ? "Admin" : "Member";
-  const roleColor = isAdmin ? "var(--alias-text---icons-warning)" : "var(--alias-text---icons-infocont)";
+  const [internalHover, setInternalHover] = (0, import_react5.useState)(false);
+  const isHover = hover !== void 0 ? hover : internalHover;
+  const isCurrent = type === "currentWS";
+  const isOther = type === "otherWS";
+  const showButtons = isHover && isOther;
+  const displayInitials = initials || wsName.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
+  const cardClass = [
+    ScWorkspaceSwitchCard_default.card,
+    isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : ScWorkspaceSwitchCard_default.cardOther,
+    showButtons ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  const dpBg = isCurrent ? "var(--alias-fill-neutral-neutralactive, #313131)" : "var(--alias-fill-neutral-neutralselected, #242424)";
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
-      style: {
-        flexShrink: 0,
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        backgroundColor: cardBg,
-        borderRadius: "var(--radius-3xl)",
-        backdropFilter: "blur(4px)",
-        border: "0.5px solid var(--alias-border-subtle)",
-        padding: "var(--spacing-3xl)",
-        gap: "var(--spacing-3xl)",
-        transition: "background-color 0.15s ease",
-        cursor: isCurrent ? "default" : "pointer",
-        boxSizing: "border-box"
-      },
-      onMouseEnter: () => !isCurrent && setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            flex: 1,
-            minWidth: 0,
-            gap: "var(--spacing-3xl)"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-              ScDp,
-              {
-                type: imageUrl ? "image" : "initial",
-                variant: "workspace",
-                initial: displayInitials,
-                imageUrl,
-                size: 64
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  minWidth: 0,
-                  flex: 1,
-                  gap: "var(--spacing-md)"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                    "p",
-                    {
-                      style: {
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        width: "100%",
-                        flexShrink: 0,
-                        color: "var(--alias-text---icons-primary)",
-                        fontFamily: "var(--font-family-font-family-body)",
-                        fontSize: "var(--font-size-font-size-md)",
-                        fontWeight: 500,
-                        lineHeight: "var(--line-height-line-height-md)",
-                        margin: 0
-                      },
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { display: "flex", alignItems: "center", width: "100%", flexShrink: 0, gap: "var(--spacing-xs)" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                      "span",
-                      {
-                        style: {
-                          flexShrink: 0,
-                          whiteSpace: "nowrap",
-                          color: roleColor,
-                          fontFamily: "var(--font-family-font-family-body)",
-                          fontSize: "var(--font-size-font-size-sm)",
-                          fontWeight: 500,
-                          lineHeight: "var(--line-height-line-height-sm)"
-                        },
-                        children: roleText
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DotSeparator, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { display: "flex", alignItems: "center", flexShrink: 0, gap: "var(--spacing-xs)" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconBolt, { style: { flexShrink: 0, width: 18, height: 18 }, color: "var(--alias-text---icons-tertiary)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                        "span",
-                        {
-                          style: {
-                            flexShrink: 0,
-                            whiteSpace: "nowrap",
-                            color: "var(--alias-text---icons-tertiary)",
-                            fontFamily: "var(--font-family-font-family-body)",
-                            fontSize: "var(--font-size-font-size-sm)",
-                            fontWeight: 400,
-                            lineHeight: "var(--line-height-line-height-sm)"
-                          },
-                          children: plan || "\u2013"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DotSeparator, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { display: "flex", alignItems: "center", minWidth: 0, flex: 1, gap: "var(--spacing-xs)" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconReferral, { style: { flexShrink: 0, width: 18, height: 18 }, color: "var(--alias-text---icons-tertiary)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                        "span",
-                        {
-                          style: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            flex: 1,
-                            minWidth: 0,
-                            color: "var(--alias-text---icons-tertiary)",
-                            fontFamily: "var(--font-family-font-family-body)",
-                            fontSize: "var(--font-size-font-size-sm)",
-                            fontWeight: 400,
-                            lineHeight: "var(--line-height-line-height-sm)"
-                          },
-                          children: ownerEmail || "\u2013"
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              }
-            ),
-            showButtons && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-              ScButton,
-              {
-                text: "Switch Workspace",
-                variant: "secondary",
-                size: "sm",
-                styleVariant: "icon-left",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSwitch, { style: { width: 16, height: 16 }, color: "var(--alias-text---icons-primary)" }),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onSwitch?.();
-                }
-              }
-            ),
-            showButtons && variant === "settings" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-              "button",
-              {
-                style: {
-                  flexShrink: 0,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: 32,
-                  height: 32,
-                  padding: "var(--spacing-xs)",
-                  borderRadius: 12,
-                  border: "1.25px solid var(--alias-border-default)",
-                  backgroundColor: "transparent",
-                  cursor: "pointer"
-                },
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onSettings?.();
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSettings, { style: { width: 16, height: 16 }, color: "var(--alias-text---icons-primary)" })
-              }
-            )
-          ]
-        }
-      )
+      className: cardClass,
+      onMouseEnter: () => isOther && setInternalHover(true),
+      onMouseLeave: () => setInternalHover(false),
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          ScDp,
+          {
+            type: imageUrl ? "image" : "initial",
+            variant: "workspace",
+            initial: displayInitials,
+            imageUrl,
+            className: ScWorkspaceSwitchCard_default.dp,
+            style: {
+              backgroundColor: dpBg,
+              borderRadius: "var(--radius-xl, 12px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: ScWorkspaceSwitchCard_default.wsName, children: wsName }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailValueRole, children: role })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Plan" }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Workspace Owner" }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
+            ] })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          ScButton,
+          {
+            text: "Switch Workspace",
+            variant: "secondary",
+            size: "sm",
+            styleVariant: "icon-left",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSwitch, { className: ScWorkspaceSwitchCard_default.btnIcon }),
+            onClick: (e) => {
+              e.stopPropagation();
+              onSwitch?.();
+            }
+          }
+        ),
+        showButtons && variant === "settings" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          ScButton,
+          {
+            styleVariant: "icon-only",
+            variant: "outline",
+            size: "sm",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSettings, { className: ScWorkspaceSwitchCard_default.btnIcon }),
+            onClick: (e) => {
+              e.stopPropagation();
+              onSettings?.();
+            }
+          }
+        )
+      ] })
     }
   );
 }
+var ScWorkspaceSwitchCard = NscWorkspaceSwitch;

package/dist/index.mjs

@@ -455,7 +455,7 @@ var ScButton_default = {
 
 // src/SC-Button/ScButton.tsx
 import { SiconHome as SiconHome2 } from "@streamoid/icons";
-import { useMemo } from "react";
+import { useMemo, isValidElement, cloneElement } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 if (typeof window !== "undefined" && CSS.registerProperty) {
   const props = [
@@ -534,6 +534,8 @@ var ScButton = ({
     ctx.putImageData(imageData, 0, 0);
     return canvas.toDataURL("image/png");
   }, [variant, type, state]);
+  const strokeWidth = size === "sm" ? 1.25 : 1.5;
+  const styledIcon = isValidElement(icon) ? cloneElement(icon, { color: "currentColor", strokeWidth }) : icon;
   const variantsClassName = ScButton_default["style-variant-" + styleVariant] + " " + ScButton_default["state-" + state] + " " + ScButton_default["variant-" + variant] + " " + ScButton_default["type-" + type] + " " + ScButton_default["size-" + size];
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -549,12 +551,12 @@ var ScButton = ({
           }
         ),
         /* @__PURE__ */ jsxs8("div", { className: ScButton_default.container, children: [
-          (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ jsx9(Fragment3, { children: icon }),
+          (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ jsx9(Fragment3, { children: styledIcon }),
           (styleVariant === "default" || styleVariant === "icon-right" || styleVariant === "icon-left") && /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsxs8("div", { className: ScButton_default.label, children: [
             text,
             " "
           ] }) }),
-          styleVariant === "icon-right" && /* @__PURE__ */ jsx9(Fragment3, { children: icon })
+          styleVariant === "icon-right" && /* @__PURE__ */ jsx9(Fragment3, { children: styledIcon })
         ] })
       ]
     }
@@ -873,6 +875,20 @@ var ScCreditsUsageCard = ({
 
 // src/SC-Dp/ScDp.tsx
 import { useState } from "react";
+
+// src/SC-Dp/ScDp.module.css
+var ScDp_default = {
+  scDp: "ScDp_scDp",
+  variantWorkspace: "ScDp_variantWorkspace",
+  variantProfile: "ScDp_variantProfile",
+  typeInitial: "ScDp_typeInitial",
+  initials: "ScDp_initials",
+  image: "ScDp_image",
+  imageWorkspace: "ScDp_imageWorkspace",
+  imageProfile: "ScDp_imageProfile"
+};
+
+// src/SC-Dp/ScDp.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 function ScDp({
   type = "initial",
@@ -885,61 +901,27 @@ function ScDp({
 }) {
   const [imageFailed, setImageFailed] = useState(false);
   const isProfile = variant === "profile";
-  const borderRadius = isProfile ? "var(--radius-full)" : "var(--radius-md)";
   const showImage = type === "image" && imageUrl && !imageFailed;
-  const containerStyle = {
+  const containerClass = [
+    ScDp_default.scDp,
+    isProfile ? ScDp_default.variantProfile : ScDp_default.variantWorkspace,
+    !showImage ? ScDp_default.typeInitial : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  const sizeStyle = {
     width: size,
     height: size,
-    borderRadius,
-    position: "relative",
-    overflow: "hidden",
-    flexShrink: 0,
-    ...showImage ? {} : {
-      backgroundColor: "var(--alias-fill-neutral-neutralselected)",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
     ...style
   };
-  return /* @__PURE__ */ jsx15("div", { className, style: containerStyle, children: showImage ? /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx15("div", { className: containerClass, style: sizeStyle, children: showImage ? /* @__PURE__ */ jsx15(
     "img",
     {
       src: imageUrl,
       alt: "",
-      style: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        pointerEvents: "none"
-      },
+      className: ScDp_default.image + " " + (isProfile ? ScDp_default.imageProfile : ScDp_default.imageWorkspace),
       onError: () => setImageFailed(true)
     }
-  ) : /* @__PURE__ */ jsx15(
-    "div",
-    {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        minHeight: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        color: "var(--alias-text---icons-primary)",
-        fontFamily: "var(--font-family-font-family-body)",
-        fontSize: size <= 32 ? `${size * 0.4}px` : "var(--font-size-font-size-md)",
-        fontWeight: 500,
-        lineHeight: 1,
-        textAlign: "center"
-      },
-      children: initial
-    }
-  ) });
+  ) : /* @__PURE__ */ jsx15("div", { className: ScDp_default.initials, children: initial }) });
 }
 
 // src/SC-Google sign in/ScGoogleSignIn.module.css
@@ -4367,225 +4349,131 @@ var ScWorkspaceCard = ({
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
 import { useState as useState2 } from "react";
-import { SiconBolt as SiconBolt6, SiconSwitch as SiconSwitch3, SiconReferral as SiconReferral2, SiconSettings as SiconSettings3 } from "@streamoid/icons";
+import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3 } from "@streamoid/icons";
+
+// src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
+var ScWorkspaceSwitchCard_default = {
+  card: "ScWorkspaceSwitchCard_card",
+  cardCurrent: "ScWorkspaceSwitchCard_cardCurrent",
+  cardOther: "ScWorkspaceSwitchCard_cardOther",
+  cardOtherHover: "ScWorkspaceSwitchCard_cardOtherHover",
+  wsInfo: "ScWorkspaceSwitchCard_wsInfo",
+  dp: "ScWorkspaceSwitchCard_dp",
+  infoCol: "ScWorkspaceSwitchCard_infoCol",
+  wsName: "ScWorkspaceSwitchCard_wsName",
+  detailsRow: "ScWorkspaceSwitchCard_detailsRow",
+  detailItem: "ScWorkspaceSwitchCard_detailItem",
+  detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
+  detailLabel: "ScWorkspaceSwitchCard_detailLabel",
+  detailValueRole: "ScWorkspaceSwitchCard_detailValueRole",
+  detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
+  vDivider: "ScWorkspaceSwitchCard_vDivider",
+  btnIcon: "ScWorkspaceSwitchCard_btnIcon"
+};
+
+// src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
 import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
-function deriveInitials2(name) {
-  return name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
-}
-function DotSeparator() {
-  return /* @__PURE__ */ jsx62(
-    "div",
-    {
-      style: { width: 24, height: 24, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
-      children: /* @__PURE__ */ jsx62(
-        "div",
-        {
-          style: {
-            width: 4,
-            height: 4,
-            borderRadius: "50%",
-            backgroundColor: "var(--alias-text---icons-disabled)"
-          }
-        }
-      )
-    }
-  );
-}
-function ScWorkspaceSwitchCard({
-  name,
+function NscWorkspaceSwitch({
+  wsName = "Workspace name is kepler",
+  role = "Admin",
+  plan = "Free",
+  ownerId = "rohan@streamoid.com",
   initials,
   imageUrl,
-  role,
-  plan,
-  ownerEmail,
-  isCurrent = false,
+  type = "currentWS",
   variant = "switch",
+  hover,
+  className,
   onSwitch,
   onSettings
 }) {
-  const [hovered, setHovered] = useState2(false);
-  const showButtons = !isCurrent && hovered;
-  const cardBg = isCurrent ? "var(--alias-surface-raised)" : hovered ? "var(--alias-surface-basesubtle)" : "var(--alias-surface-base)";
-  const displayInitials = initials || deriveInitials2(name);
-  const isAdmin = role?.toLowerCase() === "admin";
-  const roleText = isAdmin ? "Admin" : "Member";
-  const roleColor = isAdmin ? "var(--alias-text---icons-warning)" : "var(--alias-text---icons-infocont)";
+  const [internalHover, setInternalHover] = useState2(false);
+  const isHover = hover !== void 0 ? hover : internalHover;
+  const isCurrent = type === "currentWS";
+  const isOther = type === "otherWS";
+  const showButtons = isHover && isOther;
+  const displayInitials = initials || wsName.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
+  const cardClass = [
+    ScWorkspaceSwitchCard_default.card,
+    isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : ScWorkspaceSwitchCard_default.cardOther,
+    showButtons ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  const dpBg = isCurrent ? "var(--alias-fill-neutral-neutralactive, #313131)" : "var(--alias-fill-neutral-neutralselected, #242424)";
   return /* @__PURE__ */ jsx62(
     "div",
     {
-      style: {
-        flexShrink: 0,
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        backgroundColor: cardBg,
-        borderRadius: "var(--radius-3xl)",
-        backdropFilter: "blur(4px)",
-        border: "0.5px solid var(--alias-border-subtle)",
-        padding: "var(--spacing-3xl)",
-        gap: "var(--spacing-3xl)",
-        transition: "background-color 0.15s ease",
-        cursor: isCurrent ? "default" : "pointer",
-        boxSizing: "border-box"
-      },
-      onMouseEnter: () => !isCurrent && setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      children: /* @__PURE__ */ jsxs53(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            flex: 1,
-            minWidth: 0,
-            gap: "var(--spacing-3xl)"
-          },
-          children: [
-            /* @__PURE__ */ jsx62(
-              ScDp,
-              {
-                type: imageUrl ? "image" : "initial",
-                variant: "workspace",
-                initial: displayInitials,
-                imageUrl,
-                size: 64
-              }
-            ),
-            /* @__PURE__ */ jsxs53(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  minWidth: 0,
-                  flex: 1,
-                  gap: "var(--spacing-md)"
-                },
-                children: [
-                  /* @__PURE__ */ jsx62(
-                    "p",
-                    {
-                      style: {
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        width: "100%",
-                        flexShrink: 0,
-                        color: "var(--alias-text---icons-primary)",
-                        fontFamily: "var(--font-family-font-family-body)",
-                        fontSize: "var(--font-size-font-size-md)",
-                        fontWeight: 500,
-                        lineHeight: "var(--line-height-line-height-md)",
-                        margin: 0
-                      },
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs53("div", { style: { display: "flex", alignItems: "center", width: "100%", flexShrink: 0, gap: "var(--spacing-xs)" }, children: [
-                    /* @__PURE__ */ jsx62(
-                      "span",
-                      {
-                        style: {
-                          flexShrink: 0,
-                          whiteSpace: "nowrap",
-                          color: roleColor,
-                          fontFamily: "var(--font-family-font-family-body)",
-                          fontSize: "var(--font-size-font-size-sm)",
-                          fontWeight: 500,
-                          lineHeight: "var(--line-height-line-height-sm)"
-                        },
-                        children: roleText
-                      }
-                    ),
-                    /* @__PURE__ */ jsx62(DotSeparator, {}),
-                    /* @__PURE__ */ jsxs53("div", { style: { display: "flex", alignItems: "center", flexShrink: 0, gap: "var(--spacing-xs)" }, children: [
-                      /* @__PURE__ */ jsx62(SiconBolt6, { style: { flexShrink: 0, width: 18, height: 18 }, color: "var(--alias-text---icons-tertiary)" }),
-                      /* @__PURE__ */ jsx62(
-                        "span",
-                        {
-                          style: {
-                            flexShrink: 0,
-                            whiteSpace: "nowrap",
-                            color: "var(--alias-text---icons-tertiary)",
-                            fontFamily: "var(--font-family-font-family-body)",
-                            fontSize: "var(--font-size-font-size-sm)",
-                            fontWeight: 400,
-                            lineHeight: "var(--line-height-line-height-sm)"
-                          },
-                          children: plan || "\u2013"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx62(DotSeparator, {}),
-                    /* @__PURE__ */ jsxs53("div", { style: { display: "flex", alignItems: "center", minWidth: 0, flex: 1, gap: "var(--spacing-xs)" }, children: [
-                      /* @__PURE__ */ jsx62(SiconReferral2, { style: { flexShrink: 0, width: 18, height: 18 }, color: "var(--alias-text---icons-tertiary)" }),
-                      /* @__PURE__ */ jsx62(
-                        "span",
-                        {
-                          style: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            flex: 1,
-                            minWidth: 0,
-                            color: "var(--alias-text---icons-tertiary)",
-                            fontFamily: "var(--font-family-font-family-body)",
-                            fontSize: "var(--font-size-font-size-sm)",
-                            fontWeight: 400,
-                            lineHeight: "var(--line-height-line-height-sm)"
-                          },
-                          children: ownerEmail || "\u2013"
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              }
-            ),
-            showButtons && /* @__PURE__ */ jsx62(
-              ScButton,
-              {
-                text: "Switch Workspace",
-                variant: "secondary",
-                size: "sm",
-                styleVariant: "icon-left",
-                icon: /* @__PURE__ */ jsx62(SiconSwitch3, { style: { width: 16, height: 16 }, color: "var(--alias-text---icons-primary)" }),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onSwitch?.();
-                }
-              }
-            ),
-            showButtons && variant === "settings" && /* @__PURE__ */ jsx62(
-              "button",
-              {
-                style: {
-                  flexShrink: 0,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: 32,
-                  height: 32,
-                  padding: "var(--spacing-xs)",
-                  borderRadius: 12,
-                  border: "1.25px solid var(--alias-border-default)",
-                  backgroundColor: "transparent",
-                  cursor: "pointer"
-                },
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onSettings?.();
-                },
-                children: /* @__PURE__ */ jsx62(SiconSettings3, { style: { width: 16, height: 16 }, color: "var(--alias-text---icons-primary)" })
-              }
-            )
-          ]
-        }
-      )
+      className: cardClass,
+      onMouseEnter: () => isOther && setInternalHover(true),
+      onMouseLeave: () => setInternalHover(false),
+      children: /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
+        /* @__PURE__ */ jsx62(
+          ScDp,
+          {
+            type: imageUrl ? "image" : "initial",
+            variant: "workspace",
+            initial: displayInitials,
+            imageUrl,
+            className: ScWorkspaceSwitchCard_default.dp,
+            style: {
+              backgroundColor: dpBg,
+              borderRadius: "var(--radius-xl, 12px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
+          /* @__PURE__ */ jsx62("p", { className: ScWorkspaceSwitchCard_default.wsName, children: wsName }),
+          /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
+            /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueRole, children: role })
+            ] }),
+            /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
+            /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Plan" }),
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan })
+            ] }),
+            /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
+            /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Workspace Owner" }),
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
+            ] })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ jsx62(
+          ScButton,
+          {
+            text: "Switch Workspace",
+            variant: "secondary",
+            size: "sm",
+            styleVariant: "icon-left",
+            icon: /* @__PURE__ */ jsx62(SiconSwitch3, { className: ScWorkspaceSwitchCard_default.btnIcon }),
+            onClick: (e) => {
+              e.stopPropagation();
+              onSwitch?.();
+            }
+          }
+        ),
+        showButtons && variant === "settings" && /* @__PURE__ */ jsx62(
+          ScButton,
+          {
+            styleVariant: "icon-only",
+            variant: "outline",
+            size: "sm",
+            icon: /* @__PURE__ */ jsx62(SiconSettings3, { className: ScWorkspaceSwitchCard_default.btnIcon }),
+            onClick: (e) => {
+              e.stopPropagation();
+              onSettings?.();
+            }
+          }
+        )
+      ] })
     }
   );
 }
+var ScWorkspaceSwitchCard = NscWorkspaceSwitch;
 export {
+  NscWorkspaceSwitch,
   ScAccess,
   ScAppCard,
   ScAppField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@streamoid/icons": "^0.1.2"
+    "@streamoid/icons": "^0.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",