@streamoid/ui 0.2.0 → 0.2.1

package/dist/index.css

@@ -4639,3 +4639,120 @@
 .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;
+  background: var(--alias-surface-base, #101010);
+  border-radius: var(--radius-3xl, 1rem);
+  border: 0.5px solid var(--alias-border-subtle, #242424);
+  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;
+  cursor: pointer;
+}
+.ScWorkspaceSwitchCard_cardCurrent {
+  cursor: default;
+}
+.ScWorkspaceSwitchCard_cardHover {
+  background: var(--alias-surface-basesubtle, #151515);
+}
+.ScWorkspaceSwitchCard_workspaceInfo {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-3xl, 16px);
+}
+.ScWorkspaceSwitchCard_avatarWrap {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.ScWorkspaceSwitchCard_avatarCover {
+  flex-shrink: 0 !important;
+}
+.ScWorkspaceSwitchCard_avatarImg {
+  width: 60px;
+  height: 60px;
+  border-radius: var(--radius-xl, 12px);
+  object-fit: cover;
+}
+.ScWorkspaceSwitchCard_infoCol {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  padding: var(--spacing-md, 8px) 0;
+  gap: var(--spacing-md, 8px);
+}
+.ScWorkspaceSwitchCard_wsName {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  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%;
+  gap: var(--spacing-5xl, 20px);
+}
+.ScWorkspaceSwitchCard_detailItem {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.ScWorkspaceSwitchCard_detailItemFlex {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  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_detailValueWarning {
+  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;
+}
+.ScWorkspaceSwitchCard_vDivider {
+  height: 24px !important;
+  flex-shrink: 0 !important;
+}
+.ScWorkspaceSwitchCard_btnIcon {
+  width: 1rem !important;
+  height: 1rem !important;
+}

package/dist/index.js

@@ -4445,29 +4445,33 @@ 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",
+  cardHover: "ScWorkspaceSwitchCard_cardHover",
+  workspaceInfo: "ScWorkspaceSwitchCard_workspaceInfo",
+  avatarWrap: "ScWorkspaceSwitchCard_avatarWrap",
+  avatarCover: "ScWorkspaceSwitchCard_avatarCover",
+  avatarImg: "ScWorkspaceSwitchCard_avatarImg",
+  infoCol: "ScWorkspaceSwitchCard_infoCol",
+  wsName: "ScWorkspaceSwitchCard_wsName",
+  detailsRow: "ScWorkspaceSwitchCard_detailsRow",
+  detailItem: "ScWorkspaceSwitchCard_detailItem",
+  detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
+  detailLabel: "ScWorkspaceSwitchCard_detailLabel",
+  detailValueWarning: "ScWorkspaceSwitchCard_detailValueWarning",
+  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,
   initials,
@@ -4482,183 +4486,80 @@ function ScWorkspaceSwitchCard({
 }) {
   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 cardClass = [
+    ScWorkspaceSwitchCard_default.card,
+    isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : "",
+    hovered && !isCurrent ? ScWorkspaceSwitchCard_default.cardHover : ""
+  ].filter(Boolean).join(" ");
   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"
-      },
+      className: cardClass,
       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?.();
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.workspaceInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: ScWorkspaceSwitchCard_default.avatarWrap, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("img", { src: imageUrl, alt: name, className: ScWorkspaceSwitchCard_default.avatarImg }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          ScIntialProfileCover,
+          {
+            intial: displayInitials,
+            className: ScWorkspaceSwitchCard_default.avatarCover
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: ScWorkspaceSwitchCard_default.wsName, children: name }),
+          /* @__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: isAdmin ? ScWorkspaceSwitchCard_default.detailValueWarning : ScWorkspaceSwitchCard_default.detailValueSecondary,
+                  children: roleText
                 }
-              }
-            ),
-            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)" })
-              }
-            )
-          ]
-        }
-      )
+              )
+            ] }),
+            /* @__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 || "\u2013" })
+            ] }),
+            /* @__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: ownerEmail || "\u2013" })
+            ] })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          ScButton,
+          {
+            text: "Switch Workspace",
+            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?.();
+            }
+          }
+        )
+      ] })
     }
   );
 }

package/dist/index.mjs

@@ -4367,30 +4367,34 @@ 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",
+  cardHover: "ScWorkspaceSwitchCard_cardHover",
+  workspaceInfo: "ScWorkspaceSwitchCard_workspaceInfo",
+  avatarWrap: "ScWorkspaceSwitchCard_avatarWrap",
+  avatarCover: "ScWorkspaceSwitchCard_avatarCover",
+  avatarImg: "ScWorkspaceSwitchCard_avatarImg",
+  infoCol: "ScWorkspaceSwitchCard_infoCol",
+  wsName: "ScWorkspaceSwitchCard_wsName",
+  detailsRow: "ScWorkspaceSwitchCard_detailsRow",
+  detailItem: "ScWorkspaceSwitchCard_detailItem",
+  detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
+  detailLabel: "ScWorkspaceSwitchCard_detailLabel",
+  detailValueWarning: "ScWorkspaceSwitchCard_detailValueWarning",
+  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,
   initials,
@@ -4405,183 +4409,80 @@ function ScWorkspaceSwitchCard({
 }) {
   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 cardClass = [
+    ScWorkspaceSwitchCard_default.card,
+    isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : "",
+    hovered && !isCurrent ? ScWorkspaceSwitchCard_default.cardHover : ""
+  ].filter(Boolean).join(" ");
   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"
-      },
+      className: cardClass,
       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?.();
+      children: /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.workspaceInfo, children: [
+        /* @__PURE__ */ jsx62("div", { className: ScWorkspaceSwitchCard_default.avatarWrap, children: imageUrl ? /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: name, className: ScWorkspaceSwitchCard_default.avatarImg }) : /* @__PURE__ */ jsx62(
+          ScIntialProfileCover,
+          {
+            intial: displayInitials,
+            className: ScWorkspaceSwitchCard_default.avatarCover
+          }
+        ) }),
+        /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
+          /* @__PURE__ */ jsx62("p", { className: ScWorkspaceSwitchCard_default.wsName, children: name }),
+          /* @__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: isAdmin ? ScWorkspaceSwitchCard_default.detailValueWarning : ScWorkspaceSwitchCard_default.detailValueSecondary,
+                  children: roleText
                 }
-              }
-            ),
-            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)" })
-              }
-            )
-          ]
-        }
-      )
+              )
+            ] }),
+            /* @__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 || "\u2013" })
+            ] }),
+            /* @__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: ownerEmail || "\u2013" })
+            ] })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ jsx62(
+          ScButton,
+          {
+            text: "Switch Workspace",
+            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?.();
+            }
+          }
+        )
+      ] })
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",