@streamoid/ui 0.2.1 → 0.2.3

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 })
         ] })
       ]
     }
@@ -861,6 +864,9 @@ var ScCalendar = ({
   ] });
 };
 
+// src/SC-Credits usage card/ScCreditsUsageCard.tsx
+var import_react2 = require("react");
+
 // src/SC-Credits usage card/ScCreditsUsageCard.module.css
 var ScCreditsUsageCard_default = {
   scCreditsUsageCard: "ScCreditsUsageCard_scCreditsUsageCard",
@@ -871,7 +877,9 @@ var ScCreditsUsageCard_default = {
   progressContainer: "ScCreditsUsageCard_progressContainer",
   scProgressBarInstance: "ScCreditsUsageCard_scProgressBarInstance",
   remainingText: "ScCreditsUsageCard_remainingText",
-  scButtonInstance: "ScCreditsUsageCard_scButtonInstance"
+  scButtonInstance: "ScCreditsUsageCard_scButtonInstance",
+  buttonTooltipWrap: "ScCreditsUsageCard_buttonTooltipWrap",
+  buttonTooltip: "ScCreditsUsageCard_buttonTooltip"
 };
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
@@ -909,11 +917,14 @@ var ScCreditsUsageCard = ({
   remainingText = "60% Remaining",
   buyButtonText = "Buy credits",
   buyButtonState = "default",
+  buyButtonHoverText,
   onBuyClick,
   progress = 60,
   className,
   ...props
 }) => {
+  const [btnHovered, setBtnHovered] = (0, import_react2.useState)(false);
+  const displayText = btnHovered && buyButtonHoverText ? buyButtonHoverText : buyButtonText;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: ScCreditsUsageCard_default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -943,15 +954,23 @@ var ScCreditsUsageCard = ({
         " "
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        ScButton,
+        "div",
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons8.SiconHome, { className: ScCreditsUsageCard_default.siconHomeInstance }),
-          text: buyButtonText,
-          variant: "secondary",
-          size: "md",
-          state: buyButtonState,
-          className: ScCreditsUsageCard_default.scButtonInstance,
-          onClick: onBuyClick
+          className: ScCreditsUsageCard_default.buttonTooltipWrap,
+          onMouseEnter: () => setBtnHovered(true),
+          onMouseLeave: () => setBtnHovered(false),
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ScButton,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons8.SiconHome, { className: ScCreditsUsageCard_default.siconHomeInstance }),
+              text: displayText,
+              variant: "secondary",
+              size: "md",
+              state: buyButtonState,
+              className: ScCreditsUsageCard_default.scButtonInstance,
+              onClick: onBuyClick
+            }
+          )
         }
       )
     ] })
@@ -959,7 +978,21 @@ var ScCreditsUsageCard = ({
 };
 
 // src/SC-Dp/ScDp.tsx
-var import_react2 = require("react");
+var import_react3 = 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",
@@ -970,63 +1003,29 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react2.useState)(false);
+  const [imageFailed, setImageFailed] = (0, import_react3.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
@@ -1329,7 +1328,7 @@ var ScOnlyIcon = ({
 };
 
 // src/SC-Plan card/ScPlanCard.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/SC-Plan card/ScPlanCard.module.css
 var ScPlanCard_default = {
@@ -1399,7 +1398,7 @@ var ScPlanCard = ({
                   import_icons11.SiconCredits,
                   {
                     className: ScPlanCard_default.siconCreditsInstance,
-                    color: "#f5f5f5",
+                    color: "var(--alias-text-and-icons-primary, #f5f5f5)",
                     size: 24,
                     strokeWidth: 1.5
                   }
@@ -1426,7 +1425,7 @@ var ScPlanCard = ({
                             "path",
                             {
                               d: "M3 4.5L6 7.5L9 4.5",
-                              stroke: "#f5f5f5",
+                              stroke: "var(--alias-text-and-icons-primary, #f5f5f5)",
                               strokeWidth: "1.5",
                               strokeLinecap: "round",
                               strokeLinejoin: "round"
@@ -1454,12 +1453,12 @@ var ScPlanCard = ({
         ),
         isCustom && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
         isCustom && description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ScPlanCard_default.description, children: description }),
-        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react3.Fragment, { children: [
+        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react4.Fragment, { children: [
           sIdx > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons11.SiconHome, { color: "#9e9e9e", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons11.SiconHome, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -3044,7 +3043,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_icons34 = require("@streamoid/icons");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var PRIMARY_ICON = "var(--alias-text---icons-primary)";
@@ -3235,12 +3234,12 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = (0, import_react4.useRef)(null);
+  const modalRef = (0, import_react5.useRef)(null);
   const title = config?.title || "Switch workspace";
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -4443,25 +4442,25 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-var import_react5 = require("react");
+var import_react6 = 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",
+  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",
-  detailValueWarning: "ScWorkspaceSwitchCard_detailValueWarning",
+  detailValueRole: "ScWorkspaceSwitchCard_detailValueRole",
+  detailValueInfo: "ScWorkspaceSwitchCard_detailValueInfo",
   detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
   vDivider: "ScWorkspaceSwitchCard_vDivider",
   btnIcon: "ScWorkspaceSwitchCard_btnIcon"
@@ -4469,97 +4468,115 @@ var ScWorkspaceSwitchCard_default = {
 
 // 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 ScWorkspaceSwitchCard({
-  name,
+function NscWorkspaceSwitch({
+  wsName = "Workspace name is kepler",
+  role = "Admin",
+  plan = "Free",
+  ownerId = "rohan@streamoid.com",
   initials,
   imageUrl,
-  role,
-  plan,
-  ownerEmail,
-  isCurrent = false,
-  variant = "switch",
+  type = "currentWS",
+  hover,
+  className,
   onSwitch,
   onSettings
 }) {
-  const [hovered, setHovered] = (0, import_react5.useState)(false);
-  const showButtons = !isCurrent && hovered;
-  const displayInitials = initials || deriveInitials2(name);
+  const [internalHover, setInternalHover] = (0, import_react6.useState)(false);
+  const isHover = hover !== void 0 ? hover : internalHover;
+  const isCurrent = type === "currentWS";
+  const isOther = type === "otherWS";
   const isAdmin = role?.toLowerCase() === "admin";
-  const roleText = isAdmin ? "Admin" : "Member";
+  const displayRole = role ? role.charAt(0).toUpperCase() + role.slice(1).toLowerCase() : role;
+  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 : "",
-    hovered && !isCurrent ? ScWorkspaceSwitchCard_default.cardHover : ""
+    isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : ScWorkspaceSwitchCard_default.cardOther,
+    isHover && isOther ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
+    className || ""
   ].filter(Boolean).join(" ");
+  const dpBg = isCurrent ? "var(--alias-fill-neutral-neutralactive, #313131)" : "var(--alias-fill-neutral-neutralselected, #242424)";
+  const roleColorClass = isAdmin ? ScWorkspaceSwitchCard_default.detailValueRole : ScWorkspaceSwitchCard_default.detailValueInfo;
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       className: cardClass,
-      onMouseEnter: () => !isCurrent && setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      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,
+      onMouseEnter: () => 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,
           {
-            intial: displayInitials,
-            className: ScWorkspaceSwitchCard_default.avatarCover
+            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: name }),
+          /* @__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: isAdmin ? ScWorkspaceSwitchCard_default.detailValueWarning : ScWorkspaceSwitchCard_default.detailValueSecondary,
-                  children: roleText
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: roleColorClass, children: displayRole })
             ] }),
             /* @__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)("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: ownerEmail || "\u2013" })
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
             ] })
           ] })
         ] }),
-        showButtons && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          ScButton,
+        isHover && isOther && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
           {
-            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?.();
-            }
+            },
+            style: { cursor: "pointer" },
+            children: /* @__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 })
+              }
+            )
           }
         ),
-        showButtons && variant === "settings" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          ScButton,
+        isHover && isAdmin && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
           {
-            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?.();
-            }
+            },
+            style: { cursor: "pointer" },
+            children: /* @__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 })
+              }
+            )
           }
         )
       ] })
     }
   );
 }
+var ScWorkspaceSwitchCard = NscWorkspaceSwitch;