@streamoid/ui 0.1.6 → 0.1.8

package/dist/index.js

@@ -1097,11 +1097,11 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef(initialValue) {
+        function useRef2(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect(create, deps) {
+        function useEffect2(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -1884,14 +1884,14 @@ var require_react_development = __commonJS({
         exports.useContext = useContext;
         exports.useDebugValue = useDebugValue;
         exports.useDeferredValue = useDeferredValue;
-        exports.useEffect = useEffect;
+        exports.useEffect = useEffect2;
         exports.useId = useId;
         exports.useImperativeHandle = useImperativeHandle;
         exports.useInsertionEffect = useInsertionEffect;
         exports.useLayoutEffect = useLayoutEffect;
         exports.useMemo = useMemo;
         exports.useReducer = useReducer;
-        exports.useRef = useRef;
+        exports.useRef = useRef2;
         exports.useState = useState;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
@@ -2799,11 +2799,11 @@ var require_react_jsx_runtime_development = __commonJS({
             return jsxWithValidation(type, props, key, false);
           }
         }
-        var jsx105 = jsxWithValidationDynamic;
-        var jsxs57 = jsxWithValidationStatic;
+        var jsx107 = jsxWithValidationDynamic;
+        var jsxs59 = jsxWithValidationStatic;
         exports.Fragment = REACT_FRAGMENT_TYPE;
-        exports.jsx = jsx105;
-        exports.jsxs = jsxs57;
+        exports.jsx = jsx107;
+        exports.jsxs = jsxs59;
       })();
     }
   }
@@ -2881,8 +2881,9 @@ __export(index_exports, {
   ScToggleSwitch: () => ScToggleSwitch,
   ScVDivider: () => ScVDivider,
   ScVersion: () => ScVersion,
-  ScWorkspace: () => ScWorkspace,
-  ScWorkspaceCard: () => ScWorkspaceCard
+  ScWorkspaceCard: () => ScWorkspaceCard,
+  StreamoidSidebar: () => StreamoidSidebar,
+  StreamoidWorkspaceSwitcher: () => StreamoidWorkspaceSwitcher
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -3104,6 +3105,22 @@ var SiconCatalogix = ({ color = "currentColor", strokeWidth = 1.25, size = 24, .
   );
 };
 var sicon_catalogix_default = SiconCatalogix;
+var SiconClose = ({ color = "currentColor", strokeWidth = 1.25, size = 24, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "svg",
+    {
+      ...props,
+      width: size,
+      height: size,
+      strokeWidth,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6.75824 17.2426L12.0009 12M12.0009 12L17.2435 6.75735M12.0009 12L6.75824 6.75735M12.0009 12L17.2435 17.2426", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+};
+var sicon_close_default = SiconClose;
 var SiconCollapse = ({ color = "currentColor", strokeWidth = 1.25, size = 24, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "svg",
@@ -5844,6 +5861,415 @@ var ScSidebar = ({
   );
 };
 
+// src/SC-Sidebar-new/streamoid-sidebar.tsx
+var import_jsx_runtime85 = __toESM(require_jsx_runtime());
+function SectionHeader({ label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "opacity-50 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    "div",
+    {
+      className: "flex items-center w-full text-text-xs-regular",
+      style: {
+        padding: "var(--spacing-xs) var(--spacing-3xl)",
+        color: "var(--alias-text---icons-tertiary)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: label })
+    }
+  ) }) });
+}
+function HDivider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    "div",
+    {
+      className: "shrink-0 w-full",
+      style: {
+        height: "0.5px",
+        backgroundColor: "var(--alias-border-subtle)"
+      }
+    }
+  );
+}
+function resolveIcon(iconMap, item, active, expanded) {
+  const renderer = iconMap[item.iconKey];
+  if (!renderer) return null;
+  if (typeof renderer === "function") {
+    return renderer({ item, active, expanded });
+  }
+  return renderer;
+}
+function resolveToggleIcon(toggleIcon, expanded) {
+  if (!toggleIcon) return null;
+  if (typeof toggleIcon === "function") {
+    return toggleIcon(expanded);
+  }
+  return toggleIcon;
+}
+function renderMenuItem({
+  item,
+  sectionId,
+  expanded,
+  activeItemId,
+  iconMap,
+  onItemSelect
+}) {
+  const active = item.id === activeItemId;
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    ScSidebarMenu,
+    {
+      icon: resolveIcon(iconMap, item, active, expanded),
+      text: expanded ? item.label : void 0,
+      state: active ? "active" : "default",
+      variant: expanded ? "expanded" : "collapsed",
+      onClick: () => onItemSelect?.(item, sectionId)
+    },
+    item.id
+  );
+}
+function StreamoidSidebar({
+  expanded,
+  onToggle,
+  config,
+  iconMap,
+  activeItemId,
+  onItemSelect,
+  expandedLogo,
+  collapsedLogo,
+  profile,
+  versionText = "v1.0.0",
+  toggleIcon,
+  className,
+  style
+}) {
+  if (expanded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      "div",
+      {
+        className: `flex h-full items-center shrink-0 ${className ?? ""}`.trim(),
+        style: { padding: "var(--spacing-3xl)", ...style },
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+          "div",
+          {
+            className: "flex flex-col h-full relative shrink-0",
+            style: {
+              backgroundColor: "var(--alias-surface-base)",
+              borderRadius: "var(--radius-3xl)",
+              padding: "var(--spacing-md)",
+              width: 256,
+              gap: "var(--spacing-xxs)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 pointer-events-none",
+                  style: {
+                    border: "1px solid var(--alias-border-subtle)",
+                    borderRadius: "var(--radius-3xl)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                "div",
+                {
+                  className: "flex flex-col flex-1 items-start min-h-0 w-full overflow-y-auto sidebar-scroll",
+                  style: { gap: "var(--spacing-xxs)" },
+                  children: [
+                    expandedLogo,
+                    config.topItem && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                      "div",
+                      {
+                        className: "flex flex-col items-start shrink-0 w-full",
+                        style: { padding: "var(--spacing-md) 0" },
+                        children: renderMenuItem({
+                          item: config.topItem,
+                          sectionId: "top",
+                          expanded: true,
+                          activeItemId,
+                          iconMap,
+                          onItemSelect
+                        })
+                      }
+                    ),
+                    config.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                      "div",
+                      {
+                        className: "flex flex-col items-start shrink-0 w-full",
+                        style: {
+                          padding: "var(--spacing-md) 0",
+                          gap: "var(--spacing-xxs)"
+                        },
+                        children: [
+                          section.label ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SectionHeader, { label: section.label }) : null,
+                          section.items.map(
+                            (item) => renderMenuItem({
+                              item,
+                              sectionId: section.id,
+                              expanded: true,
+                              activeItemId,
+                              iconMap,
+                              onItemSelect
+                            })
+                          )
+                        ]
+                      },
+                      section.id
+                    ))
+                  ]
+                }
+              ),
+              config.bottomItems?.length ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                "div",
+                {
+                  className: "flex flex-col items-start shrink-0 w-full",
+                  style: { padding: "var(--spacing-md) 0" },
+                  children: config.bottomItems.map(
+                    (item) => renderMenuItem({
+                      item,
+                      sectionId: "bottom",
+                      expanded: true,
+                      activeItemId,
+                      iconMap,
+                      onItemSelect
+                    })
+                  )
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HDivider, {}),
+              profile ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                  "div",
+                  {
+                    className: "flex items-center shrink-0 w-full cursor-pointer",
+                    style: {
+                      padding: "var(--spacing-md)",
+                      gap: "var(--spacing-md)",
+                      borderRadius: "var(--radius-xl)"
+                    },
+                    onClick: profile.onClick,
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.background = "var(--alias-fill-neutral-neutral)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.background = "transparent";
+                    },
+                    children: [
+                      profile.avatar,
+                      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                          "span",
+                          {
+                            className: "text-text-sm-medium truncate",
+                            style: { color: "var(--alias-text---icons-primary)" },
+                            children: profile.name
+                          }
+                        ),
+                        profile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                          "span",
+                          {
+                            className: "text-text-xs-regular truncate",
+                            style: { color: "var(--alias-text---icons-muted)" },
+                            children: profile.subtitle
+                          }
+                        ) : null
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HDivider, {})
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                "div",
+                {
+                  className: "flex items-center w-full",
+                  style: {
+                    gap: "var(--spacing-xs)",
+                    padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-3xl)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                      "p",
+                      {
+                        className: "flex-1 text-text-sm-regular truncate",
+                        style: { color: "var(--alias-text---icons-muted)" },
+                        children: versionText
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                      "div",
+                      {
+                        className: "flex items-center cursor-pointer",
+                        style: {
+                          padding: "var(--spacing-md)",
+                          borderRadius: "var(--radius-3xl)"
+                        },
+                        onClick: onToggle,
+                        children: resolveToggleIcon(toggleIcon, true)
+                      }
+                    )
+                  ]
+                }
+              ) }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    "div",
+    {
+      className: `flex h-full items-center justify-center shrink-0 ${className ?? ""}`.trim(),
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+        "div",
+        {
+          className: "flex flex-col h-full items-center justify-center relative shrink-0",
+          style: {
+            backgroundColor: "var(--alias-surface-base)",
+            padding: "var(--spacing-md)",
+            gap: "var(--spacing-xxs)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "absolute inset-0 pointer-events-none",
+                style: {
+                  borderRight: "1px solid var(--alias-border-subtle)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+              "div",
+              {
+                className: "flex flex-col flex-1 items-center min-h-0 overflow-y-auto sidebar-scroll",
+                style: { gap: "var(--spacing-xxs)" },
+                children: [
+                  collapsedLogo,
+                  config.topItem ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                      "div",
+                      {
+                        className: "flex flex-col items-start shrink-0",
+                        style: { padding: "var(--spacing-md) 0" },
+                        children: renderMenuItem({
+                          item: config.topItem,
+                          sectionId: "top",
+                          expanded: false,
+                          activeItemId,
+                          iconMap,
+                          onItemSelect
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HDivider, {})
+                  ] }) : null,
+                  config.sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col items-center w-full", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                      "div",
+                      {
+                        className: "flex flex-col items-start shrink-0",
+                        style: {
+                          padding: "var(--spacing-md) 0",
+                          gap: "var(--spacing-xxs)"
+                        },
+                        children: section.items.map(
+                          (item) => renderMenuItem({
+                            item,
+                            sectionId: section.id,
+                            expanded: false,
+                            activeItemId,
+                            iconMap,
+                            onItemSelect
+                          })
+                        )
+                      }
+                    ),
+                    sectionIndex < config.sections.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HDivider, {}) : null
+                  ] }, section.id))
+                ]
+              }
+            ),
+            config.bottomItems?.length ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              "div",
+              {
+                className: "flex flex-col items-center justify-center shrink-0 w-full",
+                style: { padding: "var(--spacing-md) 0" },
+                children: config.bottomItems.map(
+                  (item) => renderMenuItem({
+                    item,
+                    sectionId: "bottom",
+                    expanded: false,
+                    activeItemId,
+                    iconMap,
+                    onItemSelect
+                  })
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HDivider, {}),
+            profile ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                "div",
+                {
+                  className: "flex items-center justify-center shrink-0 cursor-pointer",
+                  style: {
+                    padding: "var(--spacing-md) 0",
+                    borderRadius: "var(--radius-3xl)"
+                  },
+                  onClick: profile.onClick,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "var(--alias-fill-neutral-neutral)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: profile.avatar
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(HDivider, {})
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+              "div",
+              {
+                className: "shrink-0 flex flex-col items-center",
+                style: {
+                  gap: "var(--spacing-xl)",
+                  padding: "var(--spacing-md)",
+                  width: 56
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                    "div",
+                    {
+                      className: "flex items-center cursor-pointer",
+                      style: {
+                        padding: "var(--spacing-md)",
+                        borderRadius: "var(--radius-3xl)"
+                      },
+                      onClick: onToggle,
+                      children: resolveToggleIcon(toggleIcon, false)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                    "p",
+                    {
+                      className: "text-text-xs-regular text-center truncate",
+                      style: { color: "var(--alias-text---icons-muted)" },
+                      children: versionText
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/SC-Slider/ScSlider.module.css
 var ScSlider_default = {
   scSlider: "ScSlider_scSlider",
@@ -5854,26 +6280,343 @@ var ScSlider_default = {
 };
 
 // src/SC-Slider/ScSlider.tsx
-var import_jsx_runtime85 = __toESM(require_jsx_runtime());
+var import_jsx_runtime86 = __toESM(require_jsx_runtime());
 var ScSlider = ({
   className,
   onValueChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScSlider_default.scSlider + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressDot }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressDot2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressDot2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressDot2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressDot2 })
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScSlider_default.scSlider + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressDot }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressDot2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressDot2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressDot2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSlider_default.progressDot2 })
   ] });
 };
 
+// src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
+var import_react = __toESM(require_react());
+var import_jsx_runtime87 = __toESM(require_jsx_runtime());
+var PRIMARY_ICON = "var(--alias-text---icons-primary)";
+function deriveInitials(name) {
+  return name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
+}
+function normalizeRole(role) {
+  return role === "admin" ? "admin" : "member";
+}
+function roleLabel(role) {
+  const normalized = normalizeRole(role);
+  return normalized === "admin" ? "Admin" : "Member";
+}
+function WorkspaceRow({
+  workspace,
+  currentWorkspaceText,
+  switchWorkspaceText,
+  onSwitch
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    "div",
+    {
+      className: "relative shrink-0 w-full",
+      style: {
+        backgroundColor: "var(--alias-surface-base)",
+        borderRadius: "var(--radius-3xl)",
+        backdropFilter: "blur(4px)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 pointer-events-none",
+            style: {
+              border: "1px solid var(--alias-border-subtle)",
+              borderRadius: "var(--radius-3xl)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+          "div",
+          {
+            className: "flex items-center w-full",
+            style: {
+              gap: "var(--spacing-3xl)",
+              padding: "var(--spacing-6xl)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                "div",
+                {
+                  className: "flex flex-1 items-center min-w-0",
+                  style: { gap: "var(--spacing-xl)" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                      ScIntialProfileCover,
+                      {
+                        intial: workspace.initials || deriveInitials(workspace.name),
+                        className: "shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                      "p",
+                      {
+                        className: "flex-1 min-w-0 overflow-hidden text-ellipsis",
+                        style: {
+                          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)",
+                          display: "-webkit-box",
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: "vertical"
+                        },
+                        children: workspace.name
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                "div",
+                {
+                  className: "flex items-center justify-center shrink-0",
+                  style: {
+                    gap: "var(--spacing-6xl)",
+                    padding: "0 var(--spacing-3xl)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                      ScRole,
+                      {
+                        type: normalizeRole(workspace.role),
+                        label: roleLabel(workspace.role),
+                        style: { width: 80 }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex flex-row items-center self-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                      "div",
+                      {
+                        className: "flex items-center shrink-0",
+                        style: { gap: "var(--spacing-3xl)" },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { style: { width: 120, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                            ScPairtext,
+                            {
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(sicon_team_default, { className: "w-6 h-6", color: PRIMARY_ICON }),
+                              content: workspace.userCount || "\u2013",
+                              iconPosition: "left",
+                              type: "icon"
+                            }
+                          ) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ScVDivider, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                            "div",
+                            {
+                              className: "flex items-center",
+                              style: {
+                                width: 200,
+                                flexShrink: 0,
+                                gap: "var(--spacing-md)"
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                                  sicon_Crown_default,
+                                  {
+                                    className: "w-6 h-6 shrink-0",
+                                    color: PRIMARY_ICON
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                                  "span",
+                                  {
+                                    className: "truncate",
+                                    style: {
+                                      color: "var(--alias-text---icons-primary)",
+                                      fontFamily: "var(--font-family-font-family-body)",
+                                      fontSize: "var(--font-size-font-size-sm)",
+                                      lineHeight: "var(--line-height-line-height-sm)"
+                                    },
+                                    children: workspace.ownerEmail || "\u2013"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              workspace.isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                ScButton,
+                {
+                  text: currentWorkspaceText,
+                  variant: "outline",
+                  state: "disabled",
+                  size: "lg",
+                  style: { width: 200, flexShrink: 0, opacity: 0.5 }
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                ScButton,
+                {
+                  text: switchWorkspaceText,
+                  variant: "secondary",
+                  size: "lg",
+                  styleVariant: "icon-left",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(sicon_switch_default, { className: "w-5 h-5", color: PRIMARY_ICON }),
+                  style: { width: 200, flexShrink: 0 },
+                  onClick: onSwitch
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function StreamoidWorkspaceSwitcher({
+  open,
+  onClose,
+  workspaces,
+  loading = false,
+  onSwitchWorkspace,
+  config
+}) {
+  const modalRef = (0, import_react.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_react.useEffect)(() => {
+    if (!open) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center",
+      style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+        "div",
+        {
+          ref: modalRef,
+          className: "flex flex-col items-start relative",
+          style: {
+            backgroundColor: "var(--alias-surface-subtle)",
+            borderRadius: "var(--radius-4xl)",
+            border: "1px solid var(--alias-border-subtle)",
+            width: "min(1000px, 90vw)",
+            height: "60vh"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+              "div",
+              {
+                className: "shrink-0 w-full relative",
+                style: {
+                  borderBottom: "1px solid var(--alias-border-divider)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                  "div",
+                  {
+                    className: "flex items-center w-full",
+                    style: {
+                      gap: "var(--spacing-3xl)",
+                      padding: "var(--spacing-3xl) var(--spacing-6xl)"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                        "p",
+                        {
+                          className: "flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+                          style: {
+                            color: "var(--alias-text---icons-primary)",
+                            fontFamily: "var(--font-family-font-family-body)",
+                            fontSize: "var(--font-size-font-size-lg)",
+                            fontWeight: 600,
+                            lineHeight: "var(--line-height-line-height-lg)"
+                          },
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "shrink-0 cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(sicon_close_default, { className: "w-6 h-6", color: PRIMARY_ICON }) })
+                    ]
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+              "div",
+              {
+                className: "flex-1 min-h-0 w-full overflow-y-auto",
+                style: {
+                  borderRadius: "0 0 var(--radius-4xl) var(--radius-4xl)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+                  "div",
+                  {
+                    className: "flex flex-col items-start",
+                    style: {
+                      padding: "var(--spacing-6xl)",
+                      gap: "var(--spacing-3xl)"
+                    },
+                    children: [
+                      loading && workspaces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                        "p",
+                        {
+                          style: {
+                            fontFamily: "var(--font-family-font-family-body)",
+                            fontSize: "var(--font-size-font-size-sm)",
+                            color: "var(--alias-text---icons-muted)"
+                          },
+                          children: loadingText
+                        }
+                      ) : null,
+                      workspaces.map((ws) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                        WorkspaceRow,
+                        {
+                          workspace: ws,
+                          currentWorkspaceText,
+                          switchWorkspaceText,
+                          onSwitch: () => {
+                            if (ws.isCurrent) {
+                              onClose();
+                              return;
+                            }
+                            void onSwitchWorkspace(ws);
+                          }
+                        },
+                        ws.id
+                      ))
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/SC-app listing card/ScAppListingCard.module.css
 var ScAppListingCard_default = {
   scAppListingCard: "ScAppListingCard_scAppListingCard",
@@ -5884,23 +6627,23 @@ var ScAppListingCard_default = {
 };
 
 // src/SC-app listing card/ScAppListingCard.tsx
-var import_jsx_runtime86 = __toESM(require_jsx_runtime());
+var import_jsx_runtime88 = __toESM(require_jsx_runtime());
 var ScAppListingCard = ({
-  icon = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(sicon_Cart_default, { className: ScAppListingCard_default.siconCartInstance }),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(sicon_Cart_default, { className: ScAppListingCard_default.siconCartInstance }),
   title = "Stores",
   descrp = "Centralized product and asset management for every storefront",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScAppListingCard_default.iconContainer, children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScAppListingCard_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScAppListingCard_default.iconContainer, children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScAppListingCard_default.title, children: [
         title,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.description, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScAppListingCard_default.description, children: [
       descrp,
       " "
     ] })
@@ -5917,22 +6660,22 @@ var ScAppCard_default = {
 };
 
 // src/SC-appCard/ScAppCard.tsx
-var import_jsx_runtime87 = __toESM(require_jsx_runtime());
+var import_jsx_runtime89 = __toESM(require_jsx_runtime());
 var ScAppCard = ({
-  appIcon = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(sicon_artifacts_default, { className: ScAppCard_default.siconArtifactsInstance }),
+  appIcon = /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(sicon_artifacts_default, { className: ScAppCard_default.siconArtifactsInstance }),
   appName = "Artifax",
   appDescription = "Info about artifax",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScAppCard_default.iconContainer, children: appIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.textContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScAppCard_default.iconContainer, children: appIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScAppCard_default.textContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScAppCard_default.title, children: [
         appName,
         " "
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.subtitle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScAppCard_default.subtitle, children: [
         appDescription,
         " "
       ] })
@@ -5968,19 +6711,19 @@ var ScToggleSwitch_default = {
 };
 
 // src/SC-toggleSwitch/ScToggleSwitch.tsx
-var import_jsx_runtime88 = __toESM(require_jsx_runtime());
+var import_jsx_runtime90 = __toESM(require_jsx_runtime());
 var ScToggleSwitch = ({
   active = "false",
   className,
   ...props
 }) => {
   const variantsClassName = ScToggleSwitch_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     "div",
     {
       className: ScToggleSwitch_default.scToggleSwitch + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "svg",
         {
           width: "41",
@@ -5989,21 +6732,21 @@ var ScToggleSwitch = ({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "path",
               {
                 d: "M0.25 12.25C0.25 5.62258 5.62258 0.25 12.25 0.25H28.25C34.8774 0.25 40.25 5.62258 40.25 12.25C40.25 18.8774 34.8774 24.25 28.25 24.25H12.25C5.62258 24.25 0.25 18.8774 0.25 12.25Z",
                 fill: "var(--alias-fill-neutral-neutral, #1a1a1a)"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "path",
               {
                 d: "M40 12.25C40 5.76065 34.7393 0.5 28.25 0.5H12.25C5.76065 0.5 0.5 5.76065 0.5 12.25C0.5 18.7393 5.76065 24 12.25 24H28.25C34.7393 24 40 18.7393 40 12.25ZM40.5 12.25C40.5 19.0155 35.0155 24.5 28.25 24.5H12.25C5.48451 24.5 0 19.0155 0 12.25C0 5.48451 5.48451 0 12.25 0H28.25C35.0155 0 40.5 5.48451 40.5 12.25Z",
                 fill: "var(--alias-border-divider, #242424)"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "path",
               {
                 d: "M2.25 12.25C2.25 6.72715 6.72715 2.25 12.25 2.25C17.7728 2.25 22.25 6.72715 22.25 12.25C22.25 17.7728 17.7728 22.25 12.25 22.25C6.72715 22.25 2.25 17.7728 2.25 12.25Z",
@@ -6018,7 +6761,7 @@ var ScToggleSwitch = ({
 };
 
 // src/SC-artifaxInvite/ScArtifaxInvite.tsx
-var import_jsx_runtime89 = __toESM(require_jsx_runtime());
+var import_jsx_runtime91 = __toESM(require_jsx_runtime());
 var ScArtifaxInvite = ({
   active = "true",
   appName = "Artifax",
@@ -6028,22 +6771,22 @@ var ScArtifaxInvite = ({
   ...props
 }) => {
   const variantsClassName = ScArtifaxInvite_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "div",
     {
       className: ScArtifaxInvite_default.scArtifaxInvite + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           ScAppCard,
           {
-            appIcon: appIcon || /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(sicon_artifacts_default, { className: ScArtifaxInvite_default.siconArtifactsInstance }),
+            appIcon: appIcon || /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(sicon_artifacts_default, { className: ScArtifaxInvite_default.siconArtifactsInstance }),
             appName,
             appDescription,
             className: ScArtifaxInvite_default.scAppCardInstance
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           ScToggleSwitch,
           {
             active: "false",
@@ -6064,22 +6807,22 @@ var ScPhtogenixInvite_default = {
 };
 
 // src/SC-phtogenixInvite/ScPhtogenixInvite.tsx
-var import_jsx_runtime90 = __toESM(require_jsx_runtime());
+var import_jsx_runtime92 = __toESM(require_jsx_runtime());
 var ScPhtogenixInvite = ({
   active = "true",
   scAppCardappDescription = "Info about photogenix",
   scAppCardappName = "Photogenix",
-  scAppCardappIcon = /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(sicon_artifacts_default, { className: ScPhtogenixInvite_default.siconArtifactsInstance }),
+  scAppCardappIcon = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_artifacts_default, { className: ScPhtogenixInvite_default.siconArtifactsInstance }),
   className,
   ...props
 }) => {
   const variantsClassName = ScPhtogenixInvite_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "div",
     {
       className: ScPhtogenixInvite_default.scPhtogenixInvite + " " + className + " " + variantsClassName,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           ScAppCard,
           {
             appIcon: scAppCardappIcon,
@@ -6088,7 +6831,7 @@ var ScPhtogenixInvite = ({
             className: ScPhtogenixInvite_default.scAppCardInstance
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           ScToggleSwitch,
           {
             active: "false",
@@ -6129,10 +6872,10 @@ var ScOnlyField_default = {
 };
 
 // src/SC-onlyField/ScOnlyField.tsx
-var import_jsx_runtime91 = __toESM(require_jsx_runtime());
+var import_jsx_runtime93 = __toESM(require_jsx_runtime());
 var ScOnlyField = ({
-  tfRightIcon = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(sicon_bolt_default, { className: ScOnlyField_default.siconBoltInstance }),
-  tfLeftIcon = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(sicon_bolt_default, { className: ScOnlyField_default.siconBoltInstance }),
+  tfRightIcon = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(sicon_bolt_default, { className: ScOnlyField_default.siconBoltInstance }),
+  tfLeftIcon = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(sicon_bolt_default, { className: ScOnlyField_default.siconBoltInstance }),
   state = "default",
   tfGroup = "icon-right",
   labelGroup = "none",
@@ -6141,25 +6884,25 @@ var ScOnlyField = ({
   ...props
 }) => {
   const variantsClassName = ScOnlyField_default["state-" + state] + " " + ScOnlyField_default["tf-group-" + tfGroup] + " " + ScOnlyField_default["label-group-" + labelGroup];
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     "div",
     {
       className: ScOnlyField_default.scOnlyField + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScOnlyField_default.inputContainer, children: [
-        (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children: tfLeftIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScOnlyField_default.inputText, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScOnlyField_default.inputContainer, children: [
+        (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_jsx_runtime93.Fragment, { children: tfLeftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScOnlyField_default.inputText, children: [
           placeholderFilled,
           " "
         ] }),
-        (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children: tfRightIcon })
+        (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_jsx_runtime93.Fragment, { children: tfRightIcon })
       ] })
     }
   );
 };
 
 // src/SC-catalogixInvite/ScCatalogixInvite.tsx
-var import_jsx_runtime92 = __toESM(require_jsx_runtime());
+var import_jsx_runtime94 = __toESM(require_jsx_runtime());
 var ScCatalogixInvite = ({
   active = "false",
   appName = "Catalogix",
@@ -6172,23 +6915,23 @@ var ScCatalogixInvite = ({
   ...props
 }) => {
   const variantsClassName = ScCatalogixInvite_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "div",
     {
       className: ScCatalogixInvite_default.scCatalogixInvite + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.appHeader, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScCatalogixInvite_default.appHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             ScAppCard,
             {
-              appIcon: appIcon || /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_artifacts_default, { className: ScCatalogixInvite_default.siconArtifactsInstance }),
+              appIcon: appIcon || /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_artifacts_default, { className: ScCatalogixInvite_default.siconArtifactsInstance }),
               appDescription,
               appName,
               className: ScCatalogixInvite_default.scAppCardInstance
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             ScToggleSwitch,
             {
               active: "false",
@@ -6196,67 +6939,67 @@ var ScCatalogixInvite = ({
             }
           )
         ] }),
-        active === "true" && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_jsx_runtime92.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
+        active === "true" && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
               storeAccessTitle,
               " "
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.selectedCount, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScCatalogixInvite_default.selectedCount, children: [
               selectedCount,
               " "
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             ScOnlyField,
             {
-              tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Search_default, { className: ScCatalogixInvite_default.siconSearchInstance }),
-              tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Search_default, { className: ScCatalogixInvite_default.siconSearchInstance }),
+              tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Search_default, { className: ScCatalogixInvite_default.siconSearchInstance }),
+              tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Search_default, { className: ScCatalogixInvite_default.siconSearchInstance }),
               placeholderFilled: searchPlaceholder,
               className: ScCatalogixInvite_default.scOnlyFieldInstance
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeListContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScCatalogixInvite_default.storeListContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(sicon_Home_default, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
@@ -6270,34 +7013,34 @@ var ScCatalogixInvite = ({
 };
 
 // src/SC-appField/ScAppField.tsx
-var import_jsx_runtime93 = __toESM(require_jsx_runtime());
+var import_jsx_runtime95 = __toESM(require_jsx_runtime());
 var ScAppField = ({
   appFieldTitle = "App permission",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScAppField_default.title, children: [
       appFieldTitle,
       " "
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.inputContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScAppField_default.inputContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         ScArtifaxInvite,
         {
           className: ScAppField_default.scArtifaxInviteInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         ScPhtogenixInvite,
         {
           scAppCardappDescription: "Info about photogenix",
           scAppCardappName: "Photogenix",
-          scAppCardappIcon: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(sicon_photogenix_default, { className: ScAppField_default.siconPhotogenixInstance }),
+          scAppCardappIcon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(sicon_photogenix_default, { className: ScAppField_default.siconPhotogenixInstance }),
           className: ScAppField_default.scPhtogenixInviteInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         ScCatalogixInvite,
         {
           active: "true",
@@ -6317,13 +7060,13 @@ var ScBillingHistoryHeader_default = {
 };
 
 // src/SC-billingHistoryHeader/ScBillingHistoryHeader.tsx
-var import_jsx_runtime94 = __toESM(require_jsx_runtime());
+var import_jsx_runtime96 = __toESM(require_jsx_runtime());
 var ScBillingHistoryHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScBillingHistoryHeader_default.scBillingHistoryHeader + " " + className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScBillingHistoryHeader_default.scBillingHistoryHeader + " " + className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       ScHeader,
       {
         text: "Invoice",
@@ -6331,7 +7074,7 @@ var ScBillingHistoryHeader = ({
         className: ScBillingHistoryHeader_default.scHeaderInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       ScHeader,
       {
         text: "Amount",
@@ -6339,7 +7082,7 @@ var ScBillingHistoryHeader = ({
         className: ScBillingHistoryHeader_default.scHeaderInstance2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       ScHeader,
       {
         text: "Date",
@@ -6347,7 +7090,7 @@ var ScBillingHistoryHeader = ({
         className: ScBillingHistoryHeader_default.scHeaderInstance2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       ScHeader,
       {
         text: "Action",
@@ -6368,30 +7111,30 @@ var ScCheckField_default = {
 };
 
 // src/SC-checkField/ScCheckField.tsx
-var import_jsx_runtime95 = __toESM(require_jsx_runtime());
+var import_jsx_runtime97 = __toESM(require_jsx_runtime());
 var ScCheckField = ({
   label = "Label",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScCheckField_default.label, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScCheckField_default.label, children: [
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScCheckField_default.tabSwitcher, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScCheckField_default.tabSwitcher, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         ScPairtext,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(sicon_Home_default, { className: ScCheckField_default.siconHomeInstance }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(sicon_Home_default, { className: ScCheckField_default.siconHomeInstance }),
           type: "checkbox",
           className: ScCheckField_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         ScPairtext,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(sicon_Home_default, { className: ScCheckField_default.siconHomeInstance }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(sicon_Home_default, { className: ScCheckField_default.siconHomeInstance }),
           type: "checkbox",
           className: ScCheckField_default.scPairtextInstance
         }
@@ -6411,9 +7154,9 @@ var ScFieldButton_default = {
 };
 
 // src/SC-fieldButton/ScFieldButton.tsx
-var import_jsx_runtime96 = __toESM(require_jsx_runtime());
+var import_jsx_runtime98 = __toESM(require_jsx_runtime());
 var ScFieldButton = ({
-  icon = /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(sicon_Home_default, { className: ScFieldButton_default.siconHomeInstance }),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(sicon_Home_default, { className: ScFieldButton_default.siconHomeInstance }),
   type = "default",
   state = "default",
   className,
@@ -6421,18 +7164,18 @@ var ScFieldButton = ({
   ...props
 }) => {
   const variantsClassName = ScFieldButton_default["type-" + type] + " " + ScFieldButton_default["state-" + state];
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     "div",
     {
       className: ScFieldButton_default.scFieldButton + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScFieldButton_default.container, children: [
-        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: icon }),
-        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScFieldButton_default.label, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScFieldButton_default.container, children: [
+        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_jsx_runtime98.Fragment, { children: icon }),
+        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_jsx_runtime98.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScFieldButton_default.label, children: [
           text,
           " "
         ] }) }),
-        type === "icon-left" && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: icon })
+        type === "icon-left" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_jsx_runtime98.Fragment, { children: icon })
       ] })
     }
   );
@@ -6446,16 +7189,16 @@ var ScPendingAction_default = {
 };
 
 // src/SC-pendingAction/ScPendingAction.tsx
-var import_jsx_runtime97 = __toESM(require_jsx_runtime());
+var import_jsx_runtime99 = __toESM(require_jsx_runtime());
 var ScPendingAction = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       ScButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(sicon_Home_default, { className: ScPendingAction_default.siconHomeInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(sicon_Home_default, { className: ScPendingAction_default.siconHomeInstance }),
         text: "Cancel",
         variant: "error",
         type: "tertiary",
@@ -6463,11 +7206,11 @@ var ScPendingAction = ({
         className: ScPendingAction_default.scButtonInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ScVDivider, { className: ScPendingAction_default.scVDividerInstance }),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ScVDivider, { className: ScPendingAction_default.scVDividerInstance }),
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       ScButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(sicon_Home_default, { className: ScPendingAction_default.siconHomeInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(sicon_Home_default, { className: ScPendingAction_default.siconHomeInstance }),
         text: "Resend",
         variant: "tertiary",
         size: "sm",
@@ -6490,7 +7233,7 @@ var ScQuickPrompt_default = {
 };
 
 // src/SC-quick prompt/ScQuickPrompt.tsx
-var import_jsx_runtime98 = __toESM(require_jsx_runtime());
+var import_jsx_runtime100 = __toESM(require_jsx_runtime());
 var ScQuickPrompt = ({
   appName = "Photogenix",
   heading = "Swap Model and Background",
@@ -6498,20 +7241,20 @@ var ScQuickPrompt = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(sicon_bolt_default, { className: ScQuickPrompt_default.siconBoltInstance }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScQuickPrompt_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScQuickPrompt_default.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(sicon_bolt_default, { className: ScQuickPrompt_default.siconBoltInstance }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScQuickPrompt_default.title, children: [
         appName,
         " "
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.body, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.heading, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScQuickPrompt_default.body, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScQuickPrompt_default.heading, children: [
         heading,
         " "
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.description, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScQuickPrompt_default.description, children: [
         description,
         " "
       ] })
@@ -6528,13 +7271,13 @@ var ScReferralTableHeader_default = {
 };
 
 // src/SC-referralTableHeader/ScReferralTableHeader.tsx
-var import_jsx_runtime99 = __toESM(require_jsx_runtime());
+var import_jsx_runtime101 = __toESM(require_jsx_runtime());
 var ScReferralTableHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScReferralTableHeader_default.scReferralTableHeader + " " + className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScReferralTableHeader_default.scReferralTableHeader + " " + className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       ScHeader,
       {
         text: "User",
@@ -6542,7 +7285,7 @@ var ScReferralTableHeader = ({
         className: ScReferralTableHeader_default.scHeaderInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       ScHeader,
       {
         text: "Date",
@@ -6550,7 +7293,7 @@ var ScReferralTableHeader = ({
         className: ScReferralTableHeader_default.scHeaderInstance2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       ScHeader,
       {
         text: "Status",
@@ -6558,7 +7301,7 @@ var ScReferralTableHeader = ({
         className: ScReferralTableHeader_default.scHeaderInstance3
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       ScHeader,
       {
         text: "Reward",
@@ -6579,7 +7322,7 @@ var ScReferralTableList_default = {
 };
 
 // src/SC-referralTableList/ScReferralTableList.tsx
-var import_jsx_runtime100 = __toESM(require_jsx_runtime());
+var import_jsx_runtime102 = __toESM(require_jsx_runtime());
 var ScReferralTableList = ({
   userEmail = "chris@kepler.com",
   userName,
@@ -6589,8 +7332,8 @@ var ScReferralTableList = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       ScProfile,
       {
         subText: userEmail,
@@ -6598,12 +7341,12 @@ var ScReferralTableList = ({
         className: ScReferralTableList_default.scProfileInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.date, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScReferralTableList_default.date, children: [
       date,
       " "
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ScBadges, { text: status, className: ScReferralTableList_default.scBadgesInstance }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.points, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ScBadges, { text: status, className: ScReferralTableList_default.scBadgesInstance }),
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScReferralTableList_default.points, children: [
       points,
       " "
     ] })
@@ -6617,33 +7360,33 @@ var ScSettingsNav_default = {
 };
 
 // src/SC-settingsNav/ScSettingsNav.tsx
-var import_jsx_runtime101 = __toESM(require_jsx_runtime());
+var import_jsx_runtime103 = __toESM(require_jsx_runtime());
 var ScSettingsNav = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScSettingsNav_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScSettingsNav_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       ScSidebarMenu,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(sicon_team_default, { className: ScSettingsNav_default.siconTeamInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(sicon_team_default, { className: ScSettingsNav_default.siconTeamInstance }),
         text: "Profile",
         state: "active",
         className: ScSettingsNav_default.scSidebarMenuInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       ScSidebarMenu,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(sicon_workspace_default, { className: ScSettingsNav_default.siconWorkspaceInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(sicon_workspace_default, { className: ScSettingsNav_default.siconWorkspaceInstance }),
         text: "Workspace",
         className: ScSettingsNav_default.scSidebarMenuInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       ScSidebarMenu,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(sicon_referral_default, { className: ScSettingsNav_default.siconReferralInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(sicon_referral_default, { className: ScSettingsNav_default.siconReferralInstance }),
         text: "Referral",
         className: ScSettingsNav_default.scSidebarMenuInstance
       }
@@ -6659,18 +7402,18 @@ var ScTabField_default = {
 };
 
 // src/SC-tabField/ScTabField.tsx
-var import_jsx_runtime102 = __toESM(require_jsx_runtime());
+var import_jsx_runtime104 = __toESM(require_jsx_runtime());
 var ScTabField = ({
   label = "Label",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScTabField_default.scTabField + " " + className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScTabField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScTabField_default.label, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: ScTabField_default.scTabField + " " + className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: ScTabField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: ScTabField_default.label, children: [
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
+    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
   ] });
 };
 
@@ -6687,19 +7430,19 @@ var ScTableHeader_default = {
 };
 
 // src/SC-tableHeader/ScTableHeader.tsx
-var import_jsx_runtime103 = __toESM(require_jsx_runtime());
+var import_jsx_runtime105 = __toESM(require_jsx_runtime());
 var ScTableHeader = ({
   type = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScTableHeader_default["type-" + type];
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
     "div",
     {
       className: ScTableHeader_default.scTableHeader + " " + className + " " + variantsClassName,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           ScHeader,
           {
             text: "User",
@@ -6707,7 +7450,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           ScHeader,
           {
             text: "Role",
@@ -6715,7 +7458,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance2
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           ScHeader,
           {
             text: "Access",
@@ -6723,7 +7466,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance3
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           ScHeader,
           {
             text: "Invited by",
@@ -6731,7 +7474,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance4
           }
         ),
-        type === "pending" && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_jsx_runtime103.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        type === "pending" && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_jsx_runtime105.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           ScHeader,
           {
             text: "Invite action",
@@ -6739,7 +7482,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance5
           }
         ) }),
-        type === "default" && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_jsx_runtime103.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        type === "default" && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_jsx_runtime105.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           ScHeader,
           {
             text: "Signed On",
@@ -6771,7 +7514,7 @@ var ScTableList_default = {
 };
 
 // src/SC-tableList/ScTableList.tsx
-var import_jsx_runtime104 = __toESM(require_jsx_runtime());
+var import_jsx_runtime106 = __toESM(require_jsx_runtime());
 var ScTableList = ({
   invitedBy = "Rohan",
   signedOn = "Nov 9th, 2025",
@@ -6783,51 +7526,51 @@ var ScTableList = ({
   ...props
 }) => {
   const variantsClassName = ScTableList_default["hover-" + hover] + " " + ScTableList_default["variant-" + variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
     "div",
     {
       className: ScTableList_default.scTableList + " " + className + " " + variantsClassName,
       onClick: (e) => onRowClick && onRowClick(invitedBy, e),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           ScProfile,
           {
             subText: userEmail,
             className: ScTableList_default.scProfileInstance
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(ScRole, { className: ScTableList_default.scRoleInstance }),
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: ScTableList_default.accessInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ScRole, { className: ScTableList_default.scRoleInstance }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScTableList_default.accessInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             ScAccess,
             {
-              component: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(sicon_artifacts_default, { className: ScTableList_default.siconArtifactsInstance }),
-              component2: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(sicon_photogenix_default, { className: ScTableList_default.siconPhotogenixInstance }),
+              component: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(sicon_artifacts_default, { className: ScTableList_default.siconArtifactsInstance }),
+              component2: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(sicon_photogenix_default, { className: ScTableList_default.siconPhotogenixInstance }),
               className: ScTableList_default.scAccessInstance
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             ScAccess,
             {
-              component: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(sicon_userAdd_default, { className: ScTableList_default.siconUserAddInstance }),
-              component2: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(sicon_Coins_default, { className: ScTableList_default.siconCoinsInstance }),
+              component: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(sicon_userAdd_default, { className: ScTableList_default.siconUserAddInstance }),
+              component2: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(sicon_Coins_default, { className: ScTableList_default.siconCoinsInstance }),
               visibleSiconCatalogix: false,
               className: ScTableList_default.scAccessInstance
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: ScTableList_default.userName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScTableList_default.userName, children: [
           invitedBy,
           " "
         ] }),
-        variant === "pending" && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_jsx_runtime104.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        variant === "pending" && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_jsx_runtime106.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           ScPendingAction,
           {
             className: ScTableList_default.scPendingActionInstance
           }
         ) }),
-        variant === "active" && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_jsx_runtime104.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: ScTableList_default.date, children: [
+        variant === "active" && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_jsx_runtime106.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScTableList_default.date, children: [
           signedOn,
           " "
         ] }) })
@@ -6856,7 +7599,7 @@ var ScWorkspaceCard_default = {
 };
 
 // src/SC-workspaceCard/ScWorkspaceCard.tsx
-var import_jsx_runtime105 = __toESM(require_jsx_runtime());
+var import_jsx_runtime107 = __toESM(require_jsx_runtime());
 var ScWorkspaceCard = ({
   workspaceName = "Stores",
   role = "Admin",
@@ -6866,21 +7609,21 @@ var ScWorkspaceCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         ScIntialProfileCover,
         {
           className: ScWorkspaceCard_default.scIntialProfileCoverInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.workspaceName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScWorkspaceCard_default.workspaceName, children: [
         workspaceName,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.userInfo, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScWorkspaceCard_default.userInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         ScBadges,
         {
           text: role,
@@ -6888,41 +7631,41 @@ var ScWorkspaceCard = ({
           className: ScWorkspaceCard_default.scBadgesInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.userDetails, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScWorkspaceCard_default.userDetails, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
           ScPairtext,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_team_default, { className: ScWorkspaceCard_default.siconTeamInstance }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(sicon_team_default, { className: ScWorkspaceCard_default.siconTeamInstance }),
             content: userCount,
             className: ScWorkspaceCard_default.scPairtextInstance
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ScVDivider, { className: ScWorkspaceCard_default.scVDividerInstance }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ScVDivider, { className: ScWorkspaceCard_default.scVDividerInstance }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
           ScPairtext,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_Crown_default, { className: ScWorkspaceCard_default.siconCrownInstance }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(sicon_Crown_default, { className: ScWorkspaceCard_default.siconCrownInstance }),
             content: ownerEmail,
             className: ScWorkspaceCard_default.scPairtextInstance
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       ScButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_switch_default, { className: ScWorkspaceCard_default.siconSwitchInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(sicon_switch_default, { className: ScWorkspaceCard_default.siconSwitchInstance }),
         text: buttonText,
         state: "disabled",
         variant: "outline",
         className: ScWorkspaceCard_default.scButtonInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       ScButton,
       {
         text: "Leave workspace",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_logout_default, { className: ScWorkspaceCard_default.siconLogoutInstance }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(sicon_logout_default, { className: ScWorkspaceCard_default.siconLogoutInstance }),
         styleVariant: "icon-only",
         variant: "error",
         className: ScWorkspaceCard_default.scButtonInstance2