@streamoid/ui 0.3.1 → 0.3.3

package/dist/index.mjs

@@ -900,8 +900,192 @@ var ScCreditsUsageCard = ({
   ] });
 };
 
-// src/SC-Dp/ScDp.tsx
+// src/SC-CreditWarningBanner/CreditWarningBanner.tsx
 import { useState as useState2 } from "react";
+import { SiconClose } from "@streamoid/icons";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var STYLES = {
+  warning: {
+    bg: "rgba(255, 165, 0, 0.08)",
+    border: "rgba(255, 165, 0, 0.32)",
+    color: "var(--primitives-warning-400)"
+  },
+  danger: {
+    bg: "rgba(255, 0, 0, 0.08)",
+    border: "rgba(255, 0, 0, 0.32)",
+    color: "var(--primitives-error-400)"
+  }
+};
+function WarningIcon({ color }) {
+  return /* @__PURE__ */ jsxs13(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "shrink-0",
+      children: [
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M8 3.16667L12.5171 11.1667C12.6588 11.4177 12.4775 11.7292 12.1895 11.7292H3.81054C3.52252 11.7292 3.34119 11.4177 3.48294 11.1667L8 3.16667Z",
+            stroke: color,
+            strokeWidth: "1.25",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M8 6.25V8.625",
+            stroke: color,
+            strokeWidth: "1.25",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M8 10.25H8.00667",
+            stroke: color,
+            strokeWidth: "1.25",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function CreditWarningBanner({
+  availableCredits,
+  remainingPct,
+  level,
+  onBuyCredits,
+  expanded = true,
+  onCollapsedClick
+}) {
+  const [dismissed, setDismissed] = useState2(false);
+  if (dismissed) return null;
+  const { bg, border, color } = STYLES[level];
+  if (!expanded) {
+    return /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Show low credits warning",
+        className: "flex shrink-0 items-center justify-center cursor-pointer transition-opacity hover:opacity-90",
+        style: {
+          width: 40,
+          height: 40,
+          backgroundColor: bg,
+          border: `0.5px solid ${border}`,
+          borderRadius: "var(--radius-xl)"
+        },
+        onClick: onCollapsedClick ?? onBuyCredits,
+        children: /* @__PURE__ */ jsx15(WarningIcon, { color })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: "flex shrink-0 w-full",
+      style: { padding: "var(--spacing-3xl) var(--spacing-md)" },
+      children: /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          className: "flex w-full flex-col",
+          style: {
+            backgroundColor: bg,
+            border: `0.5px solid ${border}`,
+            borderRadius: "var(--radius-xl)",
+            padding: "var(--spacing-xl)",
+            gap: "var(--spacing-sm, 8px)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center", style: { gap: 8 }, children: [
+              /* @__PURE__ */ jsx15(WarningIcon, { color }),
+              /* @__PURE__ */ jsx15(
+                "p",
+                {
+                  className: "min-w-0 flex-1",
+                  style: {
+                    color,
+                    fontFamily: "var(--font-family-font-family-body)",
+                    fontSize: 12,
+                    lineHeight: "var(--line-height-line-height-xs)",
+                    fontWeight: 600,
+                    letterSpacing: "var(--letter-spacing-letter-spacing-normal, 0px)"
+                  },
+                  children: "Low Credits"
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Dismiss low credits warning",
+                  className: "flex shrink-0 cursor-pointer items-center justify-center",
+                  style: { width: 16, height: 16 },
+                  onClick: () => setDismissed(true),
+                  children: /* @__PURE__ */ jsx15(SiconClose, { color, size: 16, strokeWidth: 1.25 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs13(
+              "p",
+              {
+                className: "w-full",
+                style: {
+                  color,
+                  fontFamily: "var(--font-family-font-family-body)",
+                  fontSize: 12,
+                  lineHeight: "var(--line-height-line-height-xs)",
+                  fontWeight: 400,
+                  letterSpacing: "var(--letter-spacing-letter-spacing-normal, 0px)"
+                },
+                children: [
+                  "Only ",
+                  availableCredits.toLocaleString(),
+                  " credits (",
+                  remainingPct,
+                  "%)",
+                  " ",
+                  "remaining.",
+                  " ",
+                  /* @__PURE__ */ jsx15(
+                    "button",
+                    {
+                      type: "button",
+                      className: "cursor-pointer underline",
+                      onClick: onBuyCredits,
+                      style: {
+                        color,
+                        fontFamily: "inherit",
+                        fontSize: "inherit",
+                        fontWeight: "inherit",
+                        lineHeight: "inherit"
+                      },
+                      children: "Buy credits"
+                    }
+                  ),
+                  " ",
+                  "to avoid interruptions."
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/SC-Dp/ScDp.tsx
+import { useState as useState3 } from "react";
 
 // src/SC-Dp/ScDp.module.css
 var ScDp_default = {
@@ -916,7 +1100,7 @@ var ScDp_default = {
 };
 
 // src/SC-Dp/ScDp.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function ScDp({
   type = "initial",
   variant = "workspace",
@@ -926,7 +1110,7 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = useState2(false);
+  const [imageFailed, setImageFailed] = useState3(false);
   const isProfile = variant === "profile";
   const showImage = type === "image" && imageUrl && !imageFailed;
   const containerClass = [
@@ -940,7 +1124,7 @@ function ScDp({
     height: size,
     ...style
   };
-  return /* @__PURE__ */ jsx15("div", { className: containerClass, style: sizeStyle, children: showImage ? /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16("div", { className: containerClass, style: sizeStyle, children: showImage ? /* @__PURE__ */ jsx16(
     "img",
     {
       src: imageUrl,
@@ -948,7 +1132,7 @@ function ScDp({
       className: ScDp_default.image + " " + (isProfile ? ScDp_default.imageProfile : ScDp_default.imageWorkspace),
       onError: () => setImageFailed(true)
     }
-  ) : /* @__PURE__ */ jsx15("div", { className: ScDp_default.initials, children: initial }) });
+  ) : /* @__PURE__ */ jsx16("div", { className: ScDp_default.initials, children: initial }) });
 }
 
 // src/SC-Google sign in/ScGoogleSignIn.module.css
@@ -960,7 +1144,7 @@ var ScGoogleSignIn_default = {
 };
 
 // src/SC-Google sign in/ScGoogleSignIn.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var ScGoogleSignIn = ({
   hover = "false",
   googleLogoSrc = "google-logo0.png",
@@ -969,14 +1153,14 @@ var ScGoogleSignIn = ({
   ...props
 }) => {
   const variantsClassName = ScGoogleSignIn_default["hover-" + hover];
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: ScGoogleSignIn_default.scGoogleSignIn + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ jsx16("img", { className: ScGoogleSignIn_default.googleLogo, src: googleLogoSrc }),
-        /* @__PURE__ */ jsxs13("div", { className: ScGoogleSignIn_default.signInText, children: [
+        /* @__PURE__ */ jsx17("img", { className: ScGoogleSignIn_default.googleLogo, src: googleLogoSrc }),
+        /* @__PURE__ */ jsxs14("div", { className: ScGoogleSignIn_default.signInText, children: [
           signInText,
           " "
         ] })
@@ -992,19 +1176,19 @@ var ScIntialProfileCover_default = {
 };
 
 // src/SC-Intial Profile Cover/ScIntialProfileCover.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var ScIntialProfileCover = ({
   intial = "WS",
   size,
   className
 }) => {
   const sizeStyle = size ? { width: size, height: size, padding: 0 } : void 0;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: ScIntialProfileCover_default.scIntialProfileCover + " " + className,
       style: sizeStyle,
-      children: /* @__PURE__ */ jsxs14("div", { className: ScIntialProfileCover_default.initials, children: [
+      children: /* @__PURE__ */ jsxs15("div", { className: ScIntialProfileCover_default.initials, children: [
         intial,
         " "
       ] })
@@ -1028,14 +1212,14 @@ var ScStrLogo_default = {
 };
 
 // src/SC-strLogo/ScStrLogo.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var ScStrLogo = ({
   type = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScStrLogo_default["type-" + type];
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "svg",
     {
       className: ScStrLogo_default.scStrLogo + " " + className + " " + variantsClassName,
@@ -1045,28 +1229,28 @@ var ScStrLogo = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M25.4245 0C31.151 0 35.8474 0.870386 39.5123 2.60951C43.2344 4.29067 45.9838 6.66671 47.759 9.73912C49.5912 12.7533 50.5077 16.2314 50.5078 20.173V20.6961H39.7698V19.4782C39.7698 17.3333 39.2841 15.5647 38.3106 14.1734C37.3944 12.7242 35.8187 11.6527 33.5854 10.957C31.3521 10.2614 28.2885 9.91281 24.3945 9.91281C21.0732 9.91281 18.4096 10.1737 16.4054 10.6955C14.4019 11.2171 12.9417 11.9704 12.0256 12.9555C11.1668 13.9408 10.7382 15.2459 10.738 16.8687C10.738 18.26 11.0237 19.4212 11.5964 20.3488C12.2263 21.2759 13.1717 21.9993 14.4311 22.5209C15.6907 23.0426 17.3221 23.5068 19.3259 23.9125L34.1004 26.4342C38.1662 27.1298 41.4604 28.2312 43.98 29.7384C46.5564 31.1875 48.4449 33.0145 49.6474 35.2169C50.8498 37.3617 51.452 39.8257 51.452 42.6081C51.452 45.6226 50.5928 48.4648 48.8748 51.1314C47.2143 53.7394 44.5517 55.8833 40.8878 57.5642C37.2802 59.1873 32.555 60 26.7142 60C20.9878 60 16.1485 59.2173 12.1973 57.6521C8.30332 56.0289 5.32541 53.7384 3.26391 50.782C1.26003 47.7678 0.257656 44.1162 0.257511 39.827V39.3039H10.9955V40.7833C10.9956 42.87 11.4528 44.6091 12.3689 46.0003C13.2852 47.3336 14.8895 48.3473 17.18 49.043C19.4705 49.7385 22.6487 50.0872 26.7142 50.0872C30.3217 50.0872 33.1283 49.8541 35.1325 49.3904C37.1935 48.8686 38.6249 48.1157 39.4265 47.1303C40.2853 46.087 40.7139 44.7541 40.714 43.1313C40.714 40.9288 39.9992 39.3052 38.5681 38.2617C37.1938 37.2182 34.8159 36.3778 31.4373 35.7401L16.4912 33.3922C13.2278 32.8125 10.3367 31.884 7.81746 30.609C5.35509 29.3336 3.43653 27.6227 2.06219 25.4778C0.68793 23.2751 8.30917e-05 20.58 0 17.3919C0 15.2472 0.457344 13.1595 1.37339 11.1307C2.28962 9.04377 3.75103 7.15968 5.75528 5.47852C7.75939 3.79748 10.3642 2.46289 13.5706 1.4774C16.8345 0.491954 20.7865 5.93522e-05 25.4245 0Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M75.3629 16.9273H90.0411V25.3753H75.3629V44.3157C75.3629 46.7155 75.9003 48.345 76.975 49.202C78.1064 50.0016 79.9174 50.4011 82.4058 50.4011H90.0411V60H80.0295C75.335 60 71.6298 58.8573 68.9147 56.5723C66.1997 54.2298 64.8407 50.4299 64.8406 45.1737V25.3753H57.8836V16.9273H64.8406V4.28571H75.3629V16.9273Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M106.269 29.2069H106.951C107.349 26.901 108.143 24.848 109.336 23.0483C110.528 21.1923 112.119 19.7582 114.107 18.7458C116.094 17.6774 118.536 17.1429 121.432 17.1429C124.669 17.1429 127.281 17.8188 129.269 19.1685C131.256 20.4619 132.704 22.2325 133.613 24.4817C134.578 26.6752 135.062 29.123 135.062 31.8227V38.5714H124.499V33.9321C124.499 31.1762 123.873 29.1782 122.624 27.9408C121.374 26.6478 119.272 26.001 116.32 26.001C113.027 26.0012 110.669 26.8734 109.25 28.6168C107.919 30.1985 107.212 32.4971 107.129 35.512L107.121 36.1251V60H96.4726V17.1429H106.269V29.2069Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -1075,7 +1259,7 @@ var ScStrLogo = ({
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -1084,14 +1268,14 @@ var ScStrLogo = ({
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M247.628 30.6403H248.216C248.608 28.2785 249.365 26.0856 250.485 24.0611C251.662 21.9802 253.37 20.3201 255.611 19.0827C257.851 17.7891 260.681 17.1429 264.098 17.1429C267.795 17.1429 270.819 17.9032 273.172 19.4217C275.524 20.9403 277.262 23.0207 278.382 25.6641C279.12 27.2856 279.625 29.029 279.9 30.8936H280.482C280.874 28.5316 281.659 26.3093 282.836 24.2285C284.012 22.1481 285.748 20.4619 288.044 19.1685C290.341 17.8187 293.254 17.1429 296.783 17.1429C300.424 17.1429 303.42 17.9033 305.773 19.4217C308.181 20.884 309.975 22.9076 311.151 25.4946C312.384 28.0816 313 31.0346 313 34.3527V60H302.58V37.4749C302.58 33.5941 301.768 30.8105 300.143 29.1232C298.519 27.3798 295.774 26.5074 291.909 26.5074C287.708 26.5075 284.795 27.5192 283.171 29.5438C281.546 31.5686 280.734 34.7197 280.734 38.9941V60H270.232V37.4749C270.232 33.5946 269.419 30.8105 267.795 29.1232C266.227 27.3798 263.51 26.5075 259.645 26.5074C255.388 26.5074 252.447 27.5196 250.822 29.5438C249.254 31.5686 248.469 34.7197 248.469 38.9941V60H237.966V17.1429H247.628V30.6403Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -1100,14 +1284,14 @@ var ScStrLogo = ({
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M381.603 60H370.884V19.2857H381.603V60Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -1116,28 +1300,28 @@ var ScStrLogo = ({
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M381.603 15H370.884V4.28571H381.603V15Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M508.97 60H567.484V0C535.229 0 508.97 26.9258 508.97 60ZM463.069 18.4452V60H503.594C503.594 37.1025 485.606 18.4452 463.069 18.4452Z",
             fill: "url(#paint0_linear_19_1153)"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M567.484 0V60H625.999C626.206 26.9258 599.946 0 567.484 0ZM593.537 40.4947C590.642 40.4947 588.161 37.9505 588.161 34.9823C588.161 32.0141 590.642 29.47 593.537 29.47C596.431 29.47 598.913 32.0141 598.913 34.9823C599.119 37.9505 596.638 40.4947 593.537 40.4947Z",
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18("defs", { children: /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx19("defs", { children: /* @__PURE__ */ jsxs16(
           "linearGradient",
           {
             id: "paint0_linear_19_1153",
@@ -1147,8 +1331,8 @@ var ScStrLogo = ({
             y2: "30.0494",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx18("stop", { offset: "0.673116", stopColor: "#50DCDE" }),
-              /* @__PURE__ */ jsx18("stop", { offset: "0.85581", stopColor: "#7850DE" })
+              /* @__PURE__ */ jsx19("stop", { offset: "0.673116", stopColor: "#50DCDE" }),
+              /* @__PURE__ */ jsx19("stop", { offset: "0.85581", stopColor: "#7850DE" })
             ]
           }
         ) })
@@ -1158,18 +1342,18 @@ var ScStrLogo = ({
 };
 
 // src/SC-Logo unit/ScLogoUnit.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ScLogoUnit = ({
   state = "expanded",
   className,
   ...props
 }) => {
   const variantsClassName = ScLogoUnit_default["state-" + state];
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: ScLogoUnit_default.scLogoUnit + " " + className + " " + variantsClassName,
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx20(
         ScStrLogo,
         {
           type: "default",
@@ -1194,9 +1378,9 @@ var ScMenuOptions_default = {
 
 // src/SC-Menu options/ScMenuOptions.tsx
 import { SiconTeam } from "@streamoid/icons";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var ScMenuOptions = ({
-  icon = /* @__PURE__ */ jsx20(SiconTeam, { className: ScMenuOptions_default.siconTeamInstance }),
+  icon = /* @__PURE__ */ jsx21(SiconTeam, { className: ScMenuOptions_default.siconTeamInstance }),
   version = "v2.0.21",
   hover = "false",
   variant = "default",
@@ -1205,18 +1389,18 @@ var ScMenuOptions = ({
   ...props
 }) => {
   const variantsClassName = ScMenuOptions_default["hover-" + hover] + " " + ScMenuOptions_default["variant-" + variant];
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: ScMenuOptions_default.scMenuOptions + " " + className + " " + variantsClassName,
       ...props,
       children: [
         icon,
-        /* @__PURE__ */ jsxs16("div", { className: ScMenuOptions_default.content, children: [
+        /* @__PURE__ */ jsxs17("div", { className: ScMenuOptions_default.content, children: [
           text,
           " "
         ] }),
-        variant === "with-v" && /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsxs16("div", { className: ScMenuOptions_default.content2, children: [
+        variant === "with-v" && /* @__PURE__ */ jsx21(Fragment4, { children: /* @__PURE__ */ jsxs17("div", { className: ScMenuOptions_default.content2, children: [
           version,
           " "
         ] }) })
@@ -1233,19 +1417,19 @@ var ScOnlyIcon_default = {
 
 // src/SC-OnlyIcon/ScOnlyIcon.tsx
 import { SiconSettings } from "@streamoid/icons";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ScOnlyIcon = ({
   variant = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScOnlyIcon_default["variant-" + variant];
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: ScOnlyIcon_default.scOnlyIcon + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsx21(SiconSettings, { className: ScOnlyIcon_default.siconSettingsInstance })
+      children: /* @__PURE__ */ jsx22(SiconSettings, { className: ScOnlyIcon_default.siconSettingsInstance })
     }
   );
 };
@@ -1282,7 +1466,7 @@ var ScPlanCard_default = {
 
 // src/SC-Plan card/ScPlanCard.tsx
 import { SiconCredits as SiconCredits2, SiconHome as SiconHome4 } from "@streamoid/icons";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var ScPlanCard = ({
   planName = "Pro",
   price = "$49.99 / month",
@@ -1302,22 +1486,22 @@ var ScPlanCard = ({
   const isCustom = type === "custom";
   const isFreeOrPopular = type === "free" || type === "popular";
   const variantsClassName = ScPlanCard_default["type-" + type];
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: ScPlanCard_default.scPlanCard + " " + (className || "") + " " + variantsClassName,
       children: [
-        /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.planHeader, children: /* @__PURE__ */ jsxs17("div", { className: ScPlanCard_default.planInfo, children: [
-          /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.planName, children: planName }),
-          !isCustom && /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.planPrice, children: price })
+        /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.planHeader, children: /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.planInfo, children: [
+          /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.planName, children: planName }),
+          !isCustom && /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.planPrice, children: price })
         ] }) }),
-        isFreeOrPopular && /* @__PURE__ */ jsxs17("div", { className: ScPlanCard_default.creditsWrapper, children: [
-          /* @__PURE__ */ jsxs17(
+        isFreeOrPopular && /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.creditsWrapper, children: [
+          /* @__PURE__ */ jsxs18(
             "div",
             {
               className: ScPlanCard_default.creditsContainer + (isPopular ? " " + ScPlanCard_default.creditsContainerPopular : ""),
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   SiconCredits2,
                   {
                     className: ScPlanCard_default.siconCreditsInstance,
@@ -1326,16 +1510,16 @@ var ScPlanCard = ({
                     strokeWidth: 1.5
                   }
                 ),
-                /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.creditsText, children: credits }),
-                isPopular && /* @__PURE__ */ jsxs17(
+                /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.creditsText, children: credits }),
+                isPopular && /* @__PURE__ */ jsxs18(
                   "button",
                   {
                     type: "button",
                     className: ScPlanCard_default.increaseCreditsBtn,
                     onClick: onIncreaseCredits,
                     children: [
-                      /* @__PURE__ */ jsx22("span", { className: ScPlanCard_default.increaseCreditsLabel, children: "Increase credits" }),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23("span", { className: ScPlanCard_default.increaseCreditsLabel, children: "Increase credits" }),
+                      /* @__PURE__ */ jsx23(
                         "svg",
                         {
                           className: ScPlanCard_default.increaseCreditsArrow,
@@ -1344,7 +1528,7 @@ var ScPlanCard = ({
                           viewBox: "0 0 12 12",
                           fill: "none",
                           xmlns: "http://www.w3.org/2000/svg",
-                          children: /* @__PURE__ */ jsx22(
+                          children: /* @__PURE__ */ jsx23(
                             "path",
                             {
                               d: "M3 4.5L6 7.5L9 4.5",
@@ -1364,7 +1548,7 @@ var ScPlanCard = ({
           ),
           creditsDropdown
         ] }),
-        isFreeOrPopular && /* @__PURE__ */ jsx22(
+        isFreeOrPopular && /* @__PURE__ */ jsx23(
           ScButton,
           {
             text: buttonText,
@@ -1374,20 +1558,20 @@ var ScPlanCard = ({
             onClick: buttonState !== "disabled" ? onUpgrade : void 0
           }
         ),
-        isCustom && /* @__PURE__ */ jsx22(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
-        isCustom && description && /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.description, children: description }),
-        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ jsxs17(Fragment5, { children: [
-          sIdx > 0 && /* @__PURE__ */ jsx22(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
-          /* @__PURE__ */ jsxs17("div", { className: ScPlanCard_default.featuresSection, children: [
-            /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
-            section.features.map((feature, fIdx) => /* @__PURE__ */ jsxs17("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ jsx22(SiconHome4, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
-              /* @__PURE__ */ jsx22("span", { className: ScPlanCard_default.featureText, children: feature })
+        isCustom && /* @__PURE__ */ jsx23(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
+        isCustom && description && /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.description, children: description }),
+        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          sIdx > 0 && /* @__PURE__ */ jsx23(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
+          /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.featuresSection, children: [
+            /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
+            section.features.map((feature, fIdx) => /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.featureRow, children: [
+              section.icon || /* @__PURE__ */ jsx23(SiconHome4, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
+              /* @__PURE__ */ jsx23("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
         ] }, section.section)),
-        isCustom && /* @__PURE__ */ jsx22(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
-        isCustom && /* @__PURE__ */ jsx22(
+        isCustom && /* @__PURE__ */ jsx23(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
+        isCustom && /* @__PURE__ */ jsx23(
           ScButton,
           {
             text: buttonText,
@@ -1421,7 +1605,7 @@ var ScPlanDetailsCard_default = {
 // src/SC-Plan details card/ScPlanDetailsCard.tsx
 import { SiconBilling } from "@streamoid/icons";
 import { SiconHome as SiconHome5 } from "@streamoid/icons";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var ScPlanDetailsCard = ({
   planName = "Free",
   planCredits = "30,000 credits",
@@ -1433,17 +1617,17 @@ var ScPlanDetailsCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.scPlanDetailsCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.planHeader, children: [
-      /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.scPlanDetailsCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planHeader, children: [
+      /* @__PURE__ */ jsx24(
         ScPairtext,
         {
-          icon: /* @__PURE__ */ jsx23(SiconBilling, { color: "var(--alias-text-and-icons-primary, #f5f5f5)", className: ScPlanDetailsCard_default.siconBillingInstance }),
+          icon: /* @__PURE__ */ jsx24(SiconBilling, { color: "var(--alias-text-and-icons-primary, #f5f5f5)", className: ScPlanDetailsCard_default.siconBillingInstance }),
           content: currentPlanLabel,
           className: ScPlanDetailsCard_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         ScBadges,
         {
           text: badgeText,
@@ -1453,20 +1637,20 @@ var ScPlanDetailsCard = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx23(ScHDivider, { className: ScPlanDetailsCard_default.scHDividerInstance }),
-    /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.planDetails, children: [
-      /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.planInfo, children: [
-        /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.planNameRow, children: [
-          /* @__PURE__ */ jsx23("span", { className: ScPlanDetailsCard_default.planName, children: planName }),
-          /* @__PURE__ */ jsx23("span", { className: ScPlanDetailsCard_default.dotSeparator }),
-          /* @__PURE__ */ jsx23("span", { className: ScPlanDetailsCard_default.planName, children: planCredits })
+    /* @__PURE__ */ jsx24(ScHDivider, { className: ScPlanDetailsCard_default.scHDividerInstance }),
+    /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planDetails, children: [
+      /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planInfo, children: [
+        /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planNameRow, children: [
+          /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.planName, children: planName }),
+          /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.dotSeparator }),
+          /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.planName, children: planCredits })
         ] }),
-        /* @__PURE__ */ jsx23("div", { className: ScPlanDetailsCard_default.planPrice, children: planPrice })
+        /* @__PURE__ */ jsx24("div", { className: ScPlanDetailsCard_default.planPrice, children: planPrice })
       ] }),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         ScButton,
         {
-          icon: /* @__PURE__ */ jsx23(SiconHome5, { className: ScPlanDetailsCard_default.siconHomeInstance }),
+          icon: /* @__PURE__ */ jsx24(SiconHome5, { className: ScPlanDetailsCard_default.siconHomeInstance }),
           text: upgradeButtonText,
           size: "md",
           className: ScPlanDetailsCard_default.scButtonInstance,
@@ -1488,7 +1672,7 @@ var ScProfile_default = {
 };
 
 // src/SC-Profile/ScProfile.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var ScProfile = ({
   name = "Chris Hemsworth",
   subText = "Kepler workspace",
@@ -1498,19 +1682,19 @@ var ScProfile = ({
   ...props
 }) => {
   const variantsClassName = ScProfile_default["collapsed-" + collapsed];
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: ScProfile_default.scProfile + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ jsx24("img", { className: ScProfile_default.profileImage, src: profileImage }),
-        collapsed === "false" && /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsxs19("div", { className: ScProfile_default.userInfo, children: [
-          /* @__PURE__ */ jsxs19("div", { className: ScProfile_default.userName, children: [
+        /* @__PURE__ */ jsx25("img", { className: ScProfile_default.profileImage, src: profileImage }),
+        collapsed === "false" && /* @__PURE__ */ jsx25(Fragment6, { children: /* @__PURE__ */ jsxs20("div", { className: ScProfile_default.userInfo, children: [
+          /* @__PURE__ */ jsxs20("div", { className: ScProfile_default.userName, children: [
             name,
             " "
           ] }),
-          /* @__PURE__ */ jsxs19("div", { className: ScProfile_default.userDescription, children: [
+          /* @__PURE__ */ jsxs20("div", { className: ScProfile_default.userDescription, children: [
             subText,
             " "
           ] })
@@ -1544,14 +1728,14 @@ var ScVDivider_default = {
 };
 
 // src/SC-VDivider/ScVDivider.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ScVDivider = ({
   color,
   className,
   style,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: ScVDivider_default.scVDivider + (className ? " " + className : ""),
@@ -1562,7 +1746,7 @@ var ScVDivider = ({
 };
 
 // src/SC-Profile Image update/ScProfileImageUpdate.tsx
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var ScProfileImageUpdate = ({
   imageUrl,
   initials = "",
@@ -1582,8 +1766,8 @@ var ScProfileImageUpdate = ({
     }
     e.target.value = "";
   }
-  return /* @__PURE__ */ jsxs20("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs21("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx27(
       "input",
       {
         ref: inputRef,
@@ -1593,12 +1777,12 @@ var ScProfileImageUpdate = ({
         onChange: handleFileChange
       }
     ),
-    imageUrl ? /* @__PURE__ */ jsx26("img", { className: ScProfileImageUpdate_default.profileImage, src: imageUrl, alt: "profile" }) : /* @__PURE__ */ jsx26("div", { className: ScProfileImageUpdate_default.profileImage + " " + ScProfileImageUpdate_default.profileInitials, children: initials }),
-    /* @__PURE__ */ jsxs20("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
-      /* @__PURE__ */ jsx26(
+    imageUrl ? /* @__PURE__ */ jsx27("img", { className: ScProfileImageUpdate_default.profileImage, src: imageUrl, alt: "profile" }) : /* @__PURE__ */ jsx27("div", { className: ScProfileImageUpdate_default.profileImage + " " + ScProfileImageUpdate_default.profileInitials, children: initials }),
+    /* @__PURE__ */ jsxs21("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
+      /* @__PURE__ */ jsx27(
         ScButton,
         {
-          icon: /* @__PURE__ */ jsx26(SiconUpload, { className: ScProfileImageUpdate_default.siconUploadInstance }),
+          icon: /* @__PURE__ */ jsx27(SiconUpload, { className: ScProfileImageUpdate_default.siconUploadInstance }),
           styleVariant: "icon-only",
           variant: "tertiary",
           size: "md",
@@ -1606,11 +1790,11 @@ var ScProfileImageUpdate = ({
           onClick: handleUploadClick
         }
       ),
-      /* @__PURE__ */ jsx26(ScVDivider, { className: ScProfileImageUpdate_default.scVDividerInstance }),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(ScVDivider, { className: ScProfileImageUpdate_default.scVDividerInstance }),
+      /* @__PURE__ */ jsx27(
         ScButton,
         {
-          icon: /* @__PURE__ */ jsx26(SiconDelete, { className: ScProfileImageUpdate_default.siconDeleteInstance }),
+          icon: /* @__PURE__ */ jsx27(SiconDelete, { className: ScProfileImageUpdate_default.siconDeleteInstance }),
           styleVariant: "icon-only",
           variant: "tertiary",
           size: "md",
@@ -1654,7 +1838,7 @@ var ScWorkspace_default = {
 };
 
 // src/SC-Workspace/ScWorkspace.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var ScWorkspace = ({
   collapsed = "false",
   workspaceName = "Kepler",
@@ -1664,19 +1848,19 @@ var ScWorkspace = ({
   ...props
 }) => {
   const variantsClassName = ScWorkspace_default["collapsed-" + collapsed];
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: ScWorkspace_default.scWorkspace + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ jsx27("img", { className: ScWorkspace_default.profileImage, src: profileImage }),
-        collapsed === "false" && /* @__PURE__ */ jsx27(Fragment7, { children: /* @__PURE__ */ jsxs21("div", { className: ScWorkspace_default.userInfo, children: [
-          /* @__PURE__ */ jsxs21("div", { className: ScWorkspace_default.userName, children: [
+        /* @__PURE__ */ jsx28("img", { className: ScWorkspace_default.profileImage, src: profileImage }),
+        collapsed === "false" && /* @__PURE__ */ jsx28(Fragment7, { children: /* @__PURE__ */ jsxs22("div", { className: ScWorkspace_default.userInfo, children: [
+          /* @__PURE__ */ jsxs22("div", { className: ScWorkspace_default.userName, children: [
             workspaceName,
             " "
           ] }),
-          /* @__PURE__ */ jsxs21("div", { className: ScWorkspace_default.userRole, children: [
+          /* @__PURE__ */ jsxs22("div", { className: ScWorkspace_default.userRole, children: [
             userRole,
             " "
           ] })
@@ -1705,9 +1889,9 @@ var ScTabComp_default = {
 
 // src/SC-tabComp/ScTabComp.tsx
 import { SiconHome as SiconHome6 } from "@streamoid/icons";
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var ScTabComp = ({
-  icon = /* @__PURE__ */ jsx28(SiconHome6, { className: ScTabComp_default.siconHomeInstance }),
+  icon = /* @__PURE__ */ jsx29(SiconHome6, { className: ScTabComp_default.siconHomeInstance }),
   active = "false",
   type = "text-only",
   className,
@@ -1715,14 +1899,14 @@ var ScTabComp = ({
   ...props
 }) => {
   const variantsClassName = ScTabComp_default["active-" + active] + " " + ScTabComp_default["type-" + type];
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: ScTabComp_default.scTabComp + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        type === "icon-only" && /* @__PURE__ */ jsx28(Fragment8, { children: /* @__PURE__ */ jsx28("div", { className: ScTabComp_default.icon, children: icon }) }),
-        type === "text-only" && /* @__PURE__ */ jsx28(Fragment8, { children: /* @__PURE__ */ jsx28("div", { className: ScTabComp_default.textContainer, children: /* @__PURE__ */ jsxs22("div", { className: ScTabComp_default.tabText, children: [
+        type === "icon-only" && /* @__PURE__ */ jsx29(Fragment8, { children: /* @__PURE__ */ jsx29("div", { className: ScTabComp_default.icon, children: icon }) }),
+        type === "text-only" && /* @__PURE__ */ jsx29(Fragment8, { children: /* @__PURE__ */ jsx29("div", { className: ScTabComp_default.textContainer, children: /* @__PURE__ */ jsxs23("div", { className: ScTabComp_default.tabText, children: [
           text,
           " "
         ] }) }) })
@@ -1743,7 +1927,7 @@ var ScTabSwitcher_default = {
 
 // src/SC-tabSwitcher/ScTabSwitcher.tsx
 import { SiconHome as SiconHome7 } from "@streamoid/icons";
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var ScTabSwitcher = ({
   tabCount = "2",
   component,
@@ -1755,45 +1939,45 @@ var ScTabSwitcher = ({
   ...props
 }) => {
   const variantsClassName = ScTabSwitcher_default["tab-count-" + tabCount];
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: ScTabSwitcher_default.scTabSwitcher + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        component ? component : /* @__PURE__ */ jsx29(
+        component ? component : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
-            icon: /* @__PURE__ */ jsx29(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
+            icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             active: "true",
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ),
-        component2 ? component2 : /* @__PURE__ */ jsx29(
+        component2 ? component2 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
-            icon: /* @__PURE__ */ jsx29(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
+            icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ),
-        (tabCount === "3" || tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx29(Fragment9, { children: component3 ? component3 : /* @__PURE__ */ jsx29(
+        (tabCount === "3" || tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx30(Fragment9, { children: component3 ? component3 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
-            icon: /* @__PURE__ */ jsx29(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
+            icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ) }),
-        (tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx29(Fragment9, { children: component4 ? component4 : /* @__PURE__ */ jsx29(
+        (tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx30(Fragment9, { children: component4 ? component4 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
-            icon: /* @__PURE__ */ jsx29(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
+            icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ) }),
-        tabCount === "5" && /* @__PURE__ */ jsx29(Fragment9, { children: component5 ? component5 : /* @__PURE__ */ jsx29(
+        tabCount === "5" && /* @__PURE__ */ jsx30(Fragment9, { children: component5 ? component5 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
-            icon: /* @__PURE__ */ jsx29(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
+            icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ) })
@@ -1803,18 +1987,18 @@ var ScTabSwitcher = ({
 };
 
 // src/SC-Profile options/ScProfileOptions.tsx
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var ScProfileOptions = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs24("div", { className: ScProfileOptions_default.scProfileOptions + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx30("div", { className: ScProfileOptions_default.profileHeader, children: /* @__PURE__ */ jsx30(ScProfile, { className: ScProfileOptions_default.scProfileInstance }) }),
-    /* @__PURE__ */ jsx30(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance }),
-    /* @__PURE__ */ jsxs24("div", { className: ScProfileOptions_default.profileDetails, children: [
-      /* @__PURE__ */ jsxs24("div", { className: ScProfileOptions_default.workspaceInfo, children: [
-        /* @__PURE__ */ jsx30(ScWorkspace, { className: ScProfileOptions_default.scWorkspaceInstance }),
-        /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs25("div", { className: ScProfileOptions_default.scProfileOptions + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx31("div", { className: ScProfileOptions_default.profileHeader, children: /* @__PURE__ */ jsx31(ScProfile, { className: ScProfileOptions_default.scProfileInstance }) }),
+    /* @__PURE__ */ jsx31(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance }),
+    /* @__PURE__ */ jsxs25("div", { className: ScProfileOptions_default.profileDetails, children: [
+      /* @__PURE__ */ jsxs25("div", { className: ScProfileOptions_default.workspaceInfo, children: [
+        /* @__PURE__ */ jsx31(ScWorkspace, { className: ScProfileOptions_default.scWorkspaceInstance }),
+        /* @__PURE__ */ jsx31(
           ScBadges,
           {
             text: "1000 credits left",
@@ -1824,25 +2008,25 @@ var ScProfileOptions = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         ScMenuOptions,
         {
-          icon: /* @__PURE__ */ jsx30(SiconTeam2, { className: ScProfileOptions_default.siconTeamInstance }),
+          icon: /* @__PURE__ */ jsx31(SiconTeam2, { className: ScProfileOptions_default.siconTeamInstance }),
           className: ScProfileOptions_default.scMenuOptionsInstance
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         ScMenuOptions,
         {
-          icon: /* @__PURE__ */ jsx30(SiconBilling2, { className: ScProfileOptions_default.siconBillingInstance }),
+          icon: /* @__PURE__ */ jsx31(SiconBilling2, { className: ScProfileOptions_default.siconBillingInstance }),
           text: "Billing",
           className: ScProfileOptions_default.scMenuOptionsInstance
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         ScButton,
         {
-          icon: /* @__PURE__ */ jsx30(SiconHome8, { className: ScProfileOptions_default.siconHomeInstance }),
+          icon: /* @__PURE__ */ jsx31(SiconHome8, { className: ScProfileOptions_default.siconHomeInstance }),
           text: "Switch workspace",
           variant: "secondary",
           size: "md",
@@ -1850,66 +2034,66 @@ var ScProfileOptions = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx30(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance2 }),
-    /* @__PURE__ */ jsxs24("div", { className: ScProfileOptions_default.settingsOptions, children: [
-      /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance2 }),
+    /* @__PURE__ */ jsxs25("div", { className: ScProfileOptions_default.settingsOptions, children: [
+      /* @__PURE__ */ jsx31(
         ScMenuOptions,
         {
-          icon: /* @__PURE__ */ jsx30(SiconBolt, { className: ScProfileOptions_default.siconBoltInstance }),
+          icon: /* @__PURE__ */ jsx31(SiconBolt, { className: ScProfileOptions_default.siconBoltInstance }),
           text: "What's new",
           variant: "with-v",
           className: ScProfileOptions_default.scMenuOptionsInstance
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         ScMenuOptions,
         {
-          icon: /* @__PURE__ */ jsx30(SiconSettings2, { className: ScProfileOptions_default.siconSettingsInstance }),
+          icon: /* @__PURE__ */ jsx31(SiconSettings2, { className: ScProfileOptions_default.siconSettingsInstance }),
           text: "All settings",
           className: ScProfileOptions_default.scMenuOptionsInstance
         }
       )
     ] }),
-    /* @__PURE__ */ jsx30(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance3 }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance3 }),
+    /* @__PURE__ */ jsx31(
       ScMenuOptions,
       {
-        icon: /* @__PURE__ */ jsx30(SiconLogout, { className: ScProfileOptions_default.siconLogoutInstance }),
+        icon: /* @__PURE__ */ jsx31(SiconLogout, { className: ScProfileOptions_default.siconLogoutInstance }),
         text: "Logout",
         variant: "error",
         className: ScProfileOptions_default.scMenuOptionsInstance
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       ScTabSwitcher,
       {
         tabCount: "3",
-        component: /* @__PURE__ */ jsx30(
+        component: /* @__PURE__ */ jsx31(
           ScTabComp,
           {
             className: ScProfileOptions_default.scTabCompInstance,
             active: "true",
             type: "icon-only",
-            icon: /* @__PURE__ */ jsx30(SiconSystem, { className: ScProfileOptions_default.siconSystemInstance })
+            icon: /* @__PURE__ */ jsx31(SiconSystem, { className: ScProfileOptions_default.siconSystemInstance })
           }
         ),
-        component2: /* @__PURE__ */ jsx30(
+        component2: /* @__PURE__ */ jsx31(
           ScTabComp,
           {
             className: ScProfileOptions_default.scTabCompInstance,
             type: "icon-only",
-            icon: /* @__PURE__ */ jsx30(SiconLight, { className: ScProfileOptions_default.siconLightInstance })
+            icon: /* @__PURE__ */ jsx31(SiconLight, { className: ScProfileOptions_default.siconLightInstance })
           }
         ),
-        component3: /* @__PURE__ */ jsx30(
+        component3: /* @__PURE__ */ jsx31(
           ScTabComp,
           {
             className: ScProfileOptions_default.scTabCompInstance,
             type: "icon-only",
-            icon: /* @__PURE__ */ jsx30(SiconDark, { className: ScProfileOptions_default.siconDarkInstance })
+            icon: /* @__PURE__ */ jsx31(SiconDark, { className: ScProfileOptions_default.siconDarkInstance })
           }
         ),
-        scTabCompicon: /* @__PURE__ */ jsx30(SiconSystem, { className: ScProfileOptions_default.siconSystemInstance2 }),
+        scTabCompicon: /* @__PURE__ */ jsx31(SiconSystem, { className: ScProfileOptions_default.siconSystemInstance2 }),
         scTabCompactive: "true",
         scTabComptype: "icon-only",
         className: ScProfileOptions_default.scTabSwitcherInstance
@@ -1932,7 +2116,7 @@ var ScProfileSettingsComp_default = {
 import { SiconBolt as SiconBolt3, SiconLock } from "@streamoid/icons";
 
 // src/SC-textField/ScTextField.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/SC-textField/ScTextField.module.css
 var ScTextField_default = {
@@ -1954,10 +2138,10 @@ var ScTextField_default = {
 
 // src/SC-textField/ScTextField.tsx
 import { SiconBolt as SiconBolt2 } from "@streamoid/icons";
-import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var ScTextField = ({
-  tfRightIcon = /* @__PURE__ */ jsx31(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
-  tfLeftIcon = /* @__PURE__ */ jsx31(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
+  tfRightIcon = /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
+  tfLeftIcon = /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
   state,
   tfGroup = "icon-right",
   labelGroup = "",
@@ -1967,26 +2151,26 @@ var ScTextField = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = useState3(false);
+  const [focused, setFocused] = useState4(false);
   const derivedState = state ?? (props.disabled ? "disabled" : focused ? "active" : (props.value !== void 0 ? String(props.value).length > 0 : false) ? "filled" : "default");
   const variantsClassName = ScTextField_default["state-" + derivedState] + " " + ScTextField_default["tf-group-" + tfGroup] + " " + ScTextField_default["label-group-" + labelGroup];
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: ScTextField_default.scTextField + " " + className + " " + variantsClassName,
       style,
       children: [
-        labelGroup && /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.labelContainer, children: [
-          /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.label, children: [
+        labelGroup && /* @__PURE__ */ jsxs26("div", { className: ScTextField_default.labelContainer, children: [
+          /* @__PURE__ */ jsxs26("div", { className: ScTextField_default.label, children: [
             label,
             " "
           ] }),
-          labelGroup === "text" && /* @__PURE__ */ jsx31(Fragment10, { children: /* @__PURE__ */ jsx31("div", { className: ScTextField_default.info, children: "info " }) }),
-          labelGroup === "icon" && /* @__PURE__ */ jsx31(Fragment10, { children: /* @__PURE__ */ jsx31(SiconBolt2, { className: ScTextField_default.siconBoltInstance }) })
+          labelGroup === "text" && /* @__PURE__ */ jsx32(Fragment10, { children: /* @__PURE__ */ jsx32("div", { className: ScTextField_default.info, children: "info " }) }),
+          labelGroup === "icon" && /* @__PURE__ */ jsx32(Fragment10, { children: /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }) })
         ] }),
-        /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.inputContainer, children: [
-          (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx31(Fragment10, { children: tfLeftIcon }),
-          /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsxs26("div", { className: ScTextField_default.inputContainer, children: [
+          (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx32(Fragment10, { children: tfLeftIcon }),
+          /* @__PURE__ */ jsx32(
             "input",
             {
               className: ScTextField_default.inputText,
@@ -2002,7 +2186,7 @@ var ScTextField = ({
               }
             }
           ),
-          (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx31(Fragment10, { children: tfRightIcon })
+          (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx32(Fragment10, { children: tfRightIcon })
         ] })
       ]
     }
@@ -2010,7 +2194,7 @@ var ScTextField = ({
 };
 
 // src/SC-ProfileSettingsComp/ScProfileSettingsComp.tsx
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var ScProfileSettingsComp = ({
   firstName = "Chris",
   lastName = "Hemsworth",
@@ -2018,20 +2202,20 @@ var ScProfileSettingsComp = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26("div", { className: ScProfileSettingsComp_default.scProfileSettingsComp + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs27("div", { className: ScProfileSettingsComp_default.scProfileSettingsComp + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx33(
       ScProfileImageUpdate,
       {
         className: ScProfileSettingsComp_default.scProfileImageUpdateInstance
       }
     ),
-    /* @__PURE__ */ jsxs26("div", { className: ScProfileSettingsComp_default.profileInfo, children: [
-      /* @__PURE__ */ jsxs26("div", { className: ScProfileSettingsComp_default.nameFields, children: [
-        /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsxs27("div", { className: ScProfileSettingsComp_default.profileInfo, children: [
+      /* @__PURE__ */ jsxs27("div", { className: ScProfileSettingsComp_default.nameFields, children: [
+        /* @__PURE__ */ jsx33(
           ScTextField,
           {
-            tfLeftIcon: /* @__PURE__ */ jsx32(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
-            tfRightIcon: /* @__PURE__ */ jsx32(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
+            tfLeftIcon: /* @__PURE__ */ jsx33(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
+            tfRightIcon: /* @__PURE__ */ jsx33(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
             placeholderFilled: firstName,
             label: "First Name",
             state: "filled",
@@ -2039,11 +2223,11 @@ var ScProfileSettingsComp = ({
             className: ScProfileSettingsComp_default.scTextFieldInstance
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           ScTextField,
           {
-            tfLeftIcon: /* @__PURE__ */ jsx32(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
-            tfRightIcon: /* @__PURE__ */ jsx32(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
+            tfLeftIcon: /* @__PURE__ */ jsx33(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
+            tfRightIcon: /* @__PURE__ */ jsx33(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
             placeholderFilled: lastName,
             label: "Last Name",
             state: "filled",
@@ -2052,11 +2236,11 @@ var ScProfileSettingsComp = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         ScTextField,
         {
-          tfLeftIcon: /* @__PURE__ */ jsx32(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
-          tfRightIcon: /* @__PURE__ */ jsx32(SiconLock, { className: ScProfileSettingsComp_default.siconLockInstance }),
+          tfLeftIcon: /* @__PURE__ */ jsx33(SiconBolt3, { className: ScProfileSettingsComp_default.siconBoltInstance }),
+          tfRightIcon: /* @__PURE__ */ jsx33(SiconLock, { className: ScProfileSettingsComp_default.siconLockInstance }),
           placeholderFilled: email,
           label: "Email ID",
           className: ScProfileSettingsComp_default.scTextFieldInstance2
@@ -2074,7 +2258,7 @@ var ScRole_default = {
 };
 
 // src/SC-Role/ScRole.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var ScRole = ({
   type = "admin",
   label,
@@ -2083,12 +2267,12 @@ var ScRole = ({
 }) => {
   const variantsClassName = ScRole_default["type-" + type];
   const displayLabel = label ?? (type === "admin" ? "Admin" : "Member");
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: ScRole_default.scRole + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs27("div", { className: ScRole_default.role, children: [
+      children: /* @__PURE__ */ jsxs28("div", { className: ScRole_default.role, children: [
         displayLabel,
         " "
       ] })
@@ -2131,34 +2315,48 @@ import { SiconPlus } from "@streamoid/icons";
 var ScSidebarMenu_default = {
   scSidebarMenu: "ScSidebarMenu_scSidebarMenu",
   content: "ScSidebarMenu_content",
+  moreIconWrapper: "ScSidebarMenu_moreIconWrapper",
   "state-active": "ScSidebarMenu_state-active",
+  "state-default-highlight": "ScSidebarMenu_state-default-highlight",
   "state-hover": "ScSidebarMenu_state-hover",
   "variant-collapsed": "ScSidebarMenu_variant-collapsed"
 };
 
 // src/SC-Sidebar menu/ScSidebarMenu.tsx
 import { SiconHome as SiconHome9 } from "@streamoid/icons";
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 var ScSidebarMenu = ({
-  icon = /* @__PURE__ */ jsx34(SiconHome9, { className: ScSidebarMenu_default.siconHomeInstance }),
+  icon = /* @__PURE__ */ jsx35(SiconHome9, { className: ScSidebarMenu_default.siconHomeInstance }),
   state = "default",
   variant = "expanded",
   className,
   text = "Menu Item",
+  moreIcon,
+  onMoreClick,
   ...props
 }) => {
   const variantsClassName = ScSidebarMenu_default["state-" + state] + " " + ScSidebarMenu_default["variant-" + variant];
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: ScSidebarMenu_default.scSidebarMenu + " " + className + " " + variantsClassName,
       ...props,
       children: [
         icon,
-        variant === "expanded" && /* @__PURE__ */ jsx34(Fragment11, { children: /* @__PURE__ */ jsxs28("div", { className: ScSidebarMenu_default.content, children: [
-          text,
-          " "
-        ] }) })
+        variant === "expanded" && /* @__PURE__ */ jsxs29(Fragment11, { children: [
+          /* @__PURE__ */ jsx35("div", { className: ScSidebarMenu_default.content, children: text }),
+          moreIcon && /* @__PURE__ */ jsx35(
+            "div",
+            {
+              className: ScSidebarMenu_default.moreIconWrapper,
+              onClick: (e) => {
+                e.stopPropagation();
+                onMoreClick?.(e);
+              },
+              children: moreIcon
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2179,7 +2377,7 @@ var ScSidebarProfile_default = {
 };
 
 // src/SC-Sidebar profile/ScSidebarProfile.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var ScSidebarProfile = ({
   state = "default",
   variant = "expanded",
@@ -2187,12 +2385,12 @@ var ScSidebarProfile = ({
   ...props
 }) => {
   const variantsClassName = ScSidebarProfile_default["state-" + state] + " " + ScSidebarProfile_default["variant-" + variant];
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: ScSidebarProfile_default.scSidebarProfile + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsx35(ScProfile, { className: ScSidebarProfile_default.scProfileInstance })
+      children: /* @__PURE__ */ jsx36(ScProfile, { className: ScSidebarProfile_default.scProfileInstance })
     }
   );
 };
@@ -2205,15 +2403,15 @@ var ScSidebarIcons_default = {
 
 // src/SC-sidebar icons/ScSidebarIcons.tsx
 import { SiconSupport } from "@streamoid/icons";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var ScSidebarIcons = ({
-  instance = /* @__PURE__ */ jsx36(SiconSupport, { className: ScSidebarIcons_default.siconSupportInstance }),
+  instance = /* @__PURE__ */ jsx37(SiconSupport, { className: ScSidebarIcons_default.siconSupportInstance }),
   state = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScSidebarIcons_default["state-" + state];
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: ScSidebarIcons_default.scSidebarIcons + " " + className + " " + variantsClassName,
@@ -2236,7 +2434,7 @@ var ScVersion_default = {
 
 // src/SC-version/ScVersion.tsx
 import { SiconCollapse } from "@streamoid/icons";
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var ScVersion = ({
   state = "expanded",
   version = "v2.1.2",
@@ -2246,27 +2444,27 @@ var ScVersion = ({
   ...props
 }) => {
   const variantsClassName = ScVersion_default["state-" + state];
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: ScVersion_default.scVersion + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        state === "collapsed" && /* @__PURE__ */ jsx37(Fragment12, { children: /* @__PURE__ */ jsx37("div", { className: ScVersion_default.icon, children: component ? component : /* @__PURE__ */ jsx37(
+        state === "collapsed" && /* @__PURE__ */ jsx38(Fragment12, { children: /* @__PURE__ */ jsx38("div", { className: ScVersion_default.icon, children: component ? component : /* @__PURE__ */ jsx38(
           ScSidebarIcons,
           {
-            instance: scSidebarIconsinstance || /* @__PURE__ */ jsx37(SiconCollapse, { className: ScVersion_default.siconCollapseInstance }),
+            instance: scSidebarIconsinstance || /* @__PURE__ */ jsx38(SiconCollapse, { className: ScVersion_default.siconCollapseInstance }),
             className: ScVersion_default.scSidebarIconsInstance
           }
         ) }) }),
-        /* @__PURE__ */ jsxs29("div", { className: ScVersion_default.content, children: [
+        /* @__PURE__ */ jsxs30("div", { className: ScVersion_default.content, children: [
           version,
           " "
         ] }),
-        state === "expanded" && /* @__PURE__ */ jsx37(Fragment12, { children: /* @__PURE__ */ jsx37(
+        state === "expanded" && /* @__PURE__ */ jsx38(Fragment12, { children: /* @__PURE__ */ jsx38(
           ScSidebarIcons,
           {
-            instance: /* @__PURE__ */ jsx37(SiconCollapse, { className: ScVersion_default.siconCollapseInstance }),
+            instance: /* @__PURE__ */ jsx38(SiconCollapse, { className: ScVersion_default.siconCollapseInstance }),
             state: "hover",
             className: ScVersion_default.scSidebarIconsInstance
           }
@@ -2277,7 +2475,7 @@ var ScVersion = ({
 };
 
 // src/SC-Sidebar/ScSidebar.tsx
-import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var ScSidebar = ({
   state = "expanded",
   className,
@@ -2285,46 +2483,46 @@ var ScSidebar = ({
   ...props
 }) => {
   const variantsClassName = ScSidebar_default["state-" + state];
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: ScSidebar_default.scSidebar + " " + className + " " + variantsClassName,
       children: [
-        state === "collapsed" && /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedContainer, children: [
-          /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItems, children: [
-            /* @__PURE__ */ jsx38(
+        state === "collapsed" && /* @__PURE__ */ jsx39(Fragment13, { children: /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedContainer, children: [
+          /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedItems, children: [
+            /* @__PURE__ */ jsx39(
               ScLogoUnit,
               {
                 state: "collapsed",
                 className: ScSidebar_default.scLogoUnitInstance
               }
             ),
-            /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.collapsedItemContainer, children: /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.collapsedItemContainer, children: /* @__PURE__ */ jsx39(
               ScSidebarMenu,
               {
                 text: "New chat",
-                icon: /* @__PURE__ */ jsx38(SiconPlus, { className: ScSidebar_default.siconPlusInstance }),
+                icon: /* @__PURE__ */ jsx39(SiconPlus, { className: ScSidebar_default.siconPlusInstance }),
                 variant: "collapsed",
                 className: ScSidebar_default.scSidebarMenuInstance
               }
             ) }),
-            /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance }),
-            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItemGroup, children: [
-              /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance }),
+            /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedItemGroup, children: [
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Artifax",
-                  icon: /* @__PURE__ */ jsx38(SiconArtifacts, { className: ScSidebar_default.siconArtifactsInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconArtifacts, { className: ScSidebar_default.siconArtifactsInstance }),
                   state: "active",
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Photogenix",
-                  icon: /* @__PURE__ */ jsx38(
+                  icon: /* @__PURE__ */ jsx39(
                     SiconPhotogenix,
                     {
                       className: ScSidebar_default.siconPhotogenixInstance
@@ -2334,130 +2532,130 @@ var ScSidebar = ({
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Catalogix",
-                  icon: /* @__PURE__ */ jsx38(SiconCatalogix2, { className: ScSidebar_default.siconCatalogixInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconCatalogix2, { className: ScSidebar_default.siconCatalogixInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance2 }),
-            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItemGroup, children: [
-              /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance2 }),
+            /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedItemGroup, children: [
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Teams",
-                  icon: /* @__PURE__ */ jsx38(SiconTeam3, { className: ScSidebar_default.siconTeamInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconTeam3, { className: ScSidebar_default.siconTeamInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Billing",
-                  icon: /* @__PURE__ */ jsx38(SiconBilling3, { className: ScSidebar_default.siconBillingInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconBilling3, { className: ScSidebar_default.siconBillingInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance3 }),
-            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItemGroup, children: [
-              /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance3 }),
+            /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedItemGroup, children: [
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Chat 1",
-                  icon: /* @__PURE__ */ jsx38(SiconDot, { className: ScSidebar_default.siconDotInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconDot, { className: ScSidebar_default.siconDotInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Chat 2",
-                  icon: /* @__PURE__ */ jsx38(SiconDot, { className: ScSidebar_default.siconDotInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconDot, { className: ScSidebar_default.siconDotInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance2
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "Chat 3",
-                  icon: /* @__PURE__ */ jsx38(SiconDot, { className: ScSidebar_default.siconDotInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconDot, { className: ScSidebar_default.siconDotInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
                   text: "View all",
-                  icon: /* @__PURE__ */ jsx38(SiconMore, { className: ScSidebar_default.siconMoreInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconMore, { className: ScSidebar_default.siconMoreInstance }),
                   variant: "collapsed",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.collapsedItemContainer2, children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.collapsedItemContainer2, children: /* @__PURE__ */ jsx39(
             ScSidebarMenu,
             {
               text: "Live support",
-              icon: /* @__PURE__ */ jsx38(SiconSupport2, { className: ScSidebar_default.siconSupportInstance }),
+              icon: /* @__PURE__ */ jsx39(SiconSupport2, { className: ScSidebar_default.siconSupportInstance }),
               variant: "collapsed",
               className: ScSidebar_default.scSidebarMenuInstance
             }
           ) }),
-          /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance4 }),
-          /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.collapsedItemContainer3, children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance4 }),
+          /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.collapsedItemContainer3, children: /* @__PURE__ */ jsx39(
             ScSidebarProfile,
             {
               variant: "collapsed",
               className: ScSidebar_default.scSidebarProfileInstance
             }
           ) }),
-          /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance5 }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance5 }),
+          /* @__PURE__ */ jsx39(
             ScVersion,
             {
               state: "collapsed",
-              scSidebarIconsinstance: /* @__PURE__ */ jsx38(SiconCollapse2, { className: ScSidebar_default.siconCollapseInstance }),
+              scSidebarIconsinstance: /* @__PURE__ */ jsx39(SiconCollapse2, { className: ScSidebar_default.siconCollapseInstance }),
               className: ScSidebar_default.scVersionInstance
             }
           )
         ] }) }),
-        state === "expanded" && /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.expandedContainer, children: [
-          /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.expandedItems, children: [
-            /* @__PURE__ */ jsx38(ScLogoUnit, { className: ScSidebar_default.scLogoUnitInstance }),
-            /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.expandedItemContainer, children: /* @__PURE__ */ jsx38(
+        state === "expanded" && /* @__PURE__ */ jsx39(Fragment13, { children: /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedContainer, children: [
+          /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedItems, children: [
+            /* @__PURE__ */ jsx39(ScLogoUnit, { className: ScSidebar_default.scLogoUnitInstance }),
+            /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemContainer, children: /* @__PURE__ */ jsx39(
               ScSidebarMenu,
               {
-                icon: /* @__PURE__ */ jsx38(SiconPlus, { className: ScSidebar_default.siconPlusInstance }),
+                icon: /* @__PURE__ */ jsx39(SiconPlus, { className: ScSidebar_default.siconPlusInstance }),
                 text: "New chat",
                 className: ScSidebar_default.scSidebarMenuInstance
               }
             ) }),
-            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.expandedItemGroup, children: [
-              /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.expandedItemHeader, children: /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.content, children: "Apps " }) }),
-              /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedItemGroup, children: [
+              /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemHeader, children: /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.content, children: "Apps " }) }),
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconArtifacts, { className: ScSidebar_default.siconArtifactsInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconArtifacts, { className: ScSidebar_default.siconArtifactsInstance }),
                   text: "Artifax",
                   state: "active",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(
+                  icon: /* @__PURE__ */ jsx39(
                     SiconPhotogenix,
                     {
                       className: ScSidebar_default.siconPhotogenixInstance
@@ -2467,97 +2665,97 @@ var ScSidebar = ({
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconCatalogix2, { className: ScSidebar_default.siconCatalogixInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconCatalogix2, { className: ScSidebar_default.siconCatalogixInstance }),
                   text: "Catalogix",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.expandedItemGroup, children: [
-              /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.expandedItemHeader, children: /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.content, children: "Management " }) }),
-              /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedItemGroup, children: [
+              /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemHeader, children: /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.content, children: "Management " }) }),
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconTeam3, { className: ScSidebar_default.siconTeamInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconTeam3, { className: ScSidebar_default.siconTeamInstance }),
                   text: "Teams",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconBilling3, { className: ScSidebar_default.siconBillingInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconBilling3, { className: ScSidebar_default.siconBillingInstance }),
                   text: "Billing",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.expandedItemGroup, children: [
-              /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.expandedItemHeader, children: /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.content, children: "Recents " }) }),
-              /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedItemGroup, children: [
+              /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemHeader, children: /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.content, children: "Recents " }) }),
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconDot, { className: ScSidebar_default.siconDotInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconDot, { className: ScSidebar_default.siconDotInstance }),
                   text: "Chat 1",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconDot, { className: ScSidebar_default.siconDotInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconDot, { className: ScSidebar_default.siconDotInstance }),
                   text: "Chat 2",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconDot, { className: ScSidebar_default.siconDotInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconDot, { className: ScSidebar_default.siconDotInstance }),
                   text: "Chat 3",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 ScSidebarMenu,
                 {
-                  icon: /* @__PURE__ */ jsx38(SiconMore, { className: ScSidebar_default.siconMoreInstance }),
+                  icon: /* @__PURE__ */ jsx39(SiconMore, { className: ScSidebar_default.siconMoreInstance }),
                   text: "View all",
                   className: ScSidebar_default.scSidebarMenuInstance
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.expandedItemContainer, children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemContainer, children: /* @__PURE__ */ jsx39(
             ScSidebarMenu,
             {
-              icon: /* @__PURE__ */ jsx38(SiconSupport2, { className: ScSidebar_default.siconSupportInstance }),
+              icon: /* @__PURE__ */ jsx39(SiconSupport2, { className: ScSidebar_default.siconSupportInstance }),
               text: "Live support",
               className: ScSidebar_default.scSidebarMenuInstance
             }
           ) }),
-          /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance }),
-          /* @__PURE__ */ jsx38("div", { className: ScSidebar_default.expandedItemContainer2, children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance }),
+          /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemContainer2, children: /* @__PURE__ */ jsx39(
             ScSidebarProfile,
             {
               className: ScSidebar_default.scSidebarProfileInstance
             }
           ) }),
-          /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance2 }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(ScHDivider, { className: ScSidebar_default.scHDividerInstance2 }),
+          /* @__PURE__ */ jsx39(
             ScVersion,
             {
-              component: /* @__PURE__ */ jsx38(
+              component: /* @__PURE__ */ jsx39(
                 ScSidebarIcons,
                 {
                   className: ScSidebar_default.scSidebarIconsInstance,
-                  instance: /* @__PURE__ */ jsx38(SiconCollapse2, { className: ScSidebar_default.siconCollapseInstance })
+                  instance: /* @__PURE__ */ jsx39(SiconCollapse2, { className: ScSidebar_default.siconCollapseInstance })
                 }
               ),
-              scSidebarIconsinstance: /* @__PURE__ */ jsx38(SiconCollapse2, { className: ScSidebar_default.siconCollapseInstance }),
+              scSidebarIconsinstance: /* @__PURE__ */ jsx39(SiconCollapse2, { className: ScSidebar_default.siconCollapseInstance }),
               className: ScSidebar_default.scVersionInstance
             }
           )
@@ -2568,9 +2766,9 @@ var ScSidebar = ({
 };
 
 // src/SC-Sidebar-new/streamoid-sidebar.tsx
-import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 function SectionHeader({ label }) {
-  return /* @__PURE__ */ jsx39("div", { className: "opacity-50 shrink-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40("div", { className: "opacity-50 shrink-0 w-full", children: /* @__PURE__ */ jsx40("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx40(
     "div",
     {
       className: "flex items-center w-full text-text-xs-regular",
@@ -2578,12 +2776,12 @@ function SectionHeader({ label }) {
         padding: "var(--spacing-xs) var(--spacing-3xl)",
         color: "var(--alias-text---icons-tertiary)"
       },
-      children: /* @__PURE__ */ jsx39("span", { children: label })
+      children: /* @__PURE__ */ jsx40("span", { children: label })
     }
   ) }) });
 }
 function HDivider() {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: "shrink-0 w-full",
@@ -2614,18 +2812,25 @@ function renderMenuItem({
   sectionId,
   expanded,
   activeItemId,
+  highlightedItemIds,
   iconMap,
-  onItemSelect
+  onItemSelect,
+  moreIcon,
+  onMoreClick
 }) {
   const active = item.id === activeItemId;
-  return /* @__PURE__ */ jsx39(
+  const highlighted = highlightedItemIds?.has(item.id) ?? false;
+  const state = active ? "active" : highlighted ? "default-highlight" : "default";
+  return /* @__PURE__ */ jsx40(
     ScSidebarMenu,
     {
-      icon: resolveIcon(iconMap, item, active, expanded),
+      icon: resolveIcon(iconMap, item, active || highlighted, expanded),
       text: expanded ? item.label : void 0,
-      state: active ? "active" : "default",
+      state,
       variant: expanded ? "expanded" : "collapsed",
-      onClick: () => onItemSelect?.(item, sectionId)
+      onClick: () => onItemSelect?.(item, sectionId),
+      moreIcon,
+      onMoreClick: onMoreClick ? () => onMoreClick(item, sectionId) : void 0
     },
     item.id
   );
@@ -2636,7 +2841,10 @@ function StreamoidSidebar({
   config,
   iconMap,
   activeItemId,
+  highlightedItemIds,
   onItemSelect,
+  moreIcon,
+  onMoreClick,
   expandedLogo,
   collapsedLogo,
   profile,
@@ -2644,16 +2852,20 @@ function StreamoidSidebar({
   toggleIcon,
   hideFooter = false,
   preFooterContent,
+  bodyContent,
+  showBody = false,
+  isMobile = false,
   className,
   style
 }) {
+  const effectiveHideFooter = hideFooter || isMobile;
   if (expanded) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(
       "div",
       {
         className: `flex h-full items-center shrink-0 ${className ?? ""}`.trim(),
         style: { padding: "var(--spacing-3xl)", ...style },
-        children: /* @__PURE__ */ jsxs31(
+        children: /* @__PURE__ */ jsxs32(
           "div",
           {
             className: "flex flex-col h-full relative shrink-0",
@@ -2661,12 +2873,12 @@ function StreamoidSidebar({
               backgroundColor: "var(--alias-surface-base)",
               borderRadius: "var(--radius-3xl)",
               padding: "var(--spacing-md)",
-              paddingBottom: hideFooter ? "var(--spacing-md)" : void 0,
+              paddingBottom: effectiveHideFooter ? "var(--spacing-md)" : void 0,
               width: 256,
               gap: "var(--spacing-xxs)"
             },
             children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 "div",
                 {
                   "aria-hidden": "true",
@@ -2677,29 +2889,50 @@ function StreamoidSidebar({
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs31(
+              /* @__PURE__ */ jsxs32(
                 "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__ */ jsx39(
-                      "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__ */ jsxs31(
+                    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between w-full shrink-0", children: [
+                      /* @__PURE__ */ jsx40("div", { className: "min-w-0 flex-1", children: expandedLogo }),
+                      isMobile ? /* @__PURE__ */ jsx40(
+                        "div",
+                        {
+                          className: "flex items-center cursor-pointer shrink-0",
+                          style: {
+                            padding: "var(--spacing-md)",
+                            borderRadius: "var(--radius-3xl)"
+                          },
+                          onClick: onToggle,
+                          children: resolveToggleIcon(toggleIcon, true)
+                        }
+                      ) : null
+                    ] }),
+                    config.topItem && /* @__PURE__ */ jsxs32(Fragment14, { children: [
+                      /* @__PURE__ */ jsx40(HDivider, {}),
+                      /* @__PURE__ */ jsx40(
+                        "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,
+                            highlightedItemIds,
+                            iconMap,
+                            onItemSelect,
+                            moreIcon,
+                            onMoreClick
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx40(HDivider, {})
+                    ] }),
+                    showBody && bodyContent ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ jsx40(Fragment14, { children: config.sections.map((section) => /* @__PURE__ */ jsxs32(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0 w-full",
@@ -2708,7 +2941,7 @@ function StreamoidSidebar({
                           gap: "var(--spacing-xxs)"
                         },
                         children: [
-                          section.label ? /* @__PURE__ */ jsx39(SectionHeader, { label: section.label }) : null,
+                          section.label ? /* @__PURE__ */ jsx40(SectionHeader, { label: section.label }) : null,
                           section.items.map(
                             (item) => renderMenuItem({
                               item,
@@ -2722,11 +2955,12 @@ function StreamoidSidebar({
                         ]
                       },
                       section.id
-                    ))
+                    )) })
                   ]
                 }
               ),
-              config.bottomItems?.length ? /* @__PURE__ */ jsx39(
+              preFooterContent,
+              config.bottomItems?.length ? /* @__PURE__ */ jsx40(
                 "div",
                 {
                   className: "flex flex-col items-start shrink-0 w-full",
@@ -2743,16 +2977,14 @@ function StreamoidSidebar({
                   )
                 }
               ) : null,
-              preFooterContent,
-              /* @__PURE__ */ jsx39(HDivider, {}),
-              profile ? /* @__PURE__ */ jsxs31(Fragment14, { children: [
-                /* @__PURE__ */ jsxs31(
+              /* @__PURE__ */ jsx40(HDivider, {}),
+              profile ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+                /* @__PURE__ */ jsxs32(
                   "div",
                   {
                     className: "flex items-center shrink-0 w-full cursor-pointer",
                     style: {
-                      padding: "var(--spacing-md)",
-                      marginTop: "var(--spacing-md)",
+                      padding: "var(--spacing-md) var(--spacing-xl)",
                       gap: "var(--spacing-md)",
                       borderRadius: "var(--radius-xl)"
                     },
@@ -2765,8 +2997,8 @@ function StreamoidSidebar({
                     },
                     children: [
                       profile.avatar,
-                      /* @__PURE__ */ jsxs31("div", { className: "flex flex-col flex-1 min-w-0", children: [
-                        /* @__PURE__ */ jsx39(
+                      /* @__PURE__ */ jsxs32("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsx40(
                           "span",
                           {
                             className: "text-text-sm-medium truncate",
@@ -2774,7 +3006,7 @@ function StreamoidSidebar({
                             children: profile.name
                           }
                         ),
-                        profile.subtitle ? /* @__PURE__ */ jsx39(
+                        profile.subtitle ? /* @__PURE__ */ jsx40(
                           "span",
                           {
                             className: "text-text-xs-regular truncate",
@@ -2786,21 +3018,18 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                !hideFooter && /* @__PURE__ */ jsxs31(Fragment14, { children: [
-                  /* @__PURE__ */ jsx39("div", { style: { marginTop: "var(--spacing-md)" } }),
-                  /* @__PURE__ */ jsx39(HDivider, {})
-                ] })
+                !effectiveHideFooter && /* @__PURE__ */ jsx40(Fragment14, { children: /* @__PURE__ */ jsx40(HDivider, {}) })
               ] }) : null,
-              !hideFooter && /* @__PURE__ */ jsx39("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs31(
+              !effectiveHideFooter && /* @__PURE__ */ jsx40("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx40("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs32(
                 "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)"
+                    padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xl)"
                   },
                   children: [
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(
                       "p",
                       {
                         className: "flex-1 text-text-sm-regular truncate",
@@ -2808,7 +3037,7 @@ function StreamoidSidebar({
                         children: versionText
                       }
                     ),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: "flex items-center cursor-pointer",
@@ -2829,12 +3058,12 @@ function StreamoidSidebar({
       }
     );
   }
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: `flex h-full items-center justify-center shrink-0 ${className ?? ""}`.trim(),
       style,
-      children: /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsxs32(
         "div",
         {
           className: "flex flex-col h-full items-center justify-center relative shrink-0",
@@ -2844,7 +3073,7 @@ function StreamoidSidebar({
             gap: "var(--spacing-xxs)"
           },
           children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               "div",
               {
                 "aria-hidden": "true",
@@ -2854,15 +3083,15 @@ function StreamoidSidebar({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs31(
+            /* @__PURE__ */ jsxs32(
               "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__ */ jsxs31(Fragment14, { children: [
-                    /* @__PURE__ */ jsx39(
+                  config.topItem ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0",
@@ -2872,15 +3101,18 @@ function StreamoidSidebar({
                           sectionId: "top",
                           expanded: false,
                           activeItemId,
+                          highlightedItemIds,
                           iconMap,
-                          onItemSelect
+                          onItemSelect,
+                          moreIcon,
+                          onMoreClick
                         })
                       }
                     ),
-                    /* @__PURE__ */ jsx39(HDivider, {})
+                    /* @__PURE__ */ jsx40(HDivider, {})
                   ] }) : null,
-                  config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center w-full", children: [
-                    /* @__PURE__ */ jsx39(
+                  showBody && bodyContent ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col items-center w-full", children: bodyContent }) : config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center w-full", children: [
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0",
@@ -2894,18 +3126,22 @@ function StreamoidSidebar({
                             sectionId: section.id,
                             expanded: false,
                             activeItemId,
+                            highlightedItemIds,
                             iconMap,
-                            onItemSelect
+                            onItemSelect,
+                            moreIcon,
+                            onMoreClick
                           })
                         )
                       }
                     ),
-                    sectionIndex < config.sections.length - 1 ? /* @__PURE__ */ jsx39(HDivider, {}) : null
+                    sectionIndex < config.sections.length - 1 ? /* @__PURE__ */ jsx40(HDivider, {}) : null
                   ] }, section.id))
                 ]
               }
             ),
-            config.bottomItems?.length ? /* @__PURE__ */ jsx39(
+            preFooterContent,
+            config.bottomItems?.length ? /* @__PURE__ */ jsx40(
               "div",
               {
                 className: "flex flex-col items-center justify-center shrink-0 w-full",
@@ -2916,15 +3152,18 @@ function StreamoidSidebar({
                     sectionId: "bottom",
                     expanded: false,
                     activeItemId,
+                    highlightedItemIds,
                     iconMap,
-                    onItemSelect
+                    onItemSelect,
+                    moreIcon,
+                    onMoreClick
                   })
                 )
               }
             ) : null,
-            /* @__PURE__ */ jsx39(HDivider, {}),
-            profile ? /* @__PURE__ */ jsxs31(Fragment14, { children: [
-              /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(HDivider, {}),
+            profile ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+              /* @__PURE__ */ jsx40(
                 "div",
                 {
                   className: "flex items-center justify-center shrink-0 cursor-pointer",
@@ -2942,9 +3181,9 @@ function StreamoidSidebar({
                   children: profile.avatar
                 }
               ),
-              /* @__PURE__ */ jsx39(HDivider, {})
+              /* @__PURE__ */ jsx40(HDivider, {})
             ] }) : null,
-            !hideFooter && /* @__PURE__ */ jsxs31(
+            !hideFooter && /* @__PURE__ */ jsxs32(
               "div",
               {
                 className: "shrink-0 flex flex-col items-center",
@@ -2954,7 +3193,7 @@ function StreamoidSidebar({
                   width: 56
                 },
                 children: [
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx40(
                     "div",
                     {
                       className: "flex items-center cursor-pointer",
@@ -2966,7 +3205,7 @@ function StreamoidSidebar({
                       children: resolveToggleIcon(toggleIcon, false)
                     }
                   ),
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx40(
                     "p",
                     {
                       className: "text-text-xs-regular text-center truncate",
@@ -2994,35 +3233,35 @@ var ScSlider_default = {
 };
 
 // src/SC-Slider/ScSlider.tsx
-import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var ScSlider = ({
   className,
   onValueChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs32("div", { className: ScSlider_default.scSlider + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressBar }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressDot }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressDot2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressDot2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressDot2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressBar2 }),
-    /* @__PURE__ */ jsx40("div", { className: ScSlider_default.progressDot2 })
+  return /* @__PURE__ */ jsxs33("div", { className: ScSlider_default.scSlider + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressBar }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressDot }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressDot2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressDot2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressDot2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressBar2 }),
+    /* @__PURE__ */ jsx41("div", { className: ScSlider_default.progressDot2 })
   ] });
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
 import { useEffect, useRef as useRef2 } from "react";
 import {
-  SiconClose,
+  SiconClose as SiconClose2,
   SiconTeam as SiconTeam4,
   SiconCrown,
   SiconSwitch
 } from "@streamoid/icons";
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs34 } from "react/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";
@@ -3040,7 +3279,7 @@ function WorkspaceRow({
   switchWorkspaceText,
   onSwitch
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: "relative shrink-0 w-full",
@@ -3050,7 +3289,7 @@ function WorkspaceRow({
         backdropFilter: "blur(4px)"
       },
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "div",
           {
             "aria-hidden": "true",
@@ -3061,7 +3300,7 @@ function WorkspaceRow({
             }
           }
         ),
-        /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsx42("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs34(
           "div",
           {
             className: "flex items-center w-full",
@@ -3070,20 +3309,20 @@ function WorkspaceRow({
               padding: "var(--spacing-6xl)"
             },
             children: [
-              /* @__PURE__ */ jsxs33(
+              /* @__PURE__ */ jsxs34(
                 "div",
                 {
                   className: "flex flex-1 items-center min-w-0",
                   style: { gap: "var(--spacing-xl)" },
                   children: [
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx42(
                       ScIntialProfileCover,
                       {
                         intial: workspace.initials || deriveInitials(workspace.name),
                         className: "shrink-0"
                       }
                     ),
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx42(
                       "p",
                       {
                         className: "flex-1 min-w-0 overflow-hidden text-ellipsis",
@@ -3103,7 +3342,7 @@ function WorkspaceRow({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs33(
+              /* @__PURE__ */ jsxs34(
                 "div",
                 {
                   className: "flex items-center justify-center shrink-0",
@@ -3112,7 +3351,7 @@ function WorkspaceRow({
                     padding: "0 var(--spacing-3xl)"
                   },
                   children: [
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx42(
                       ScRole,
                       {
                         type: normalizeRole(workspace.role),
@@ -3120,23 +3359,23 @@ function WorkspaceRow({
                         style: { width: 80 }
                       }
                     ),
-                    /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center self-stretch", children: /* @__PURE__ */ jsxs33(
+                    /* @__PURE__ */ jsx42("div", { className: "flex flex-row items-center self-stretch", children: /* @__PURE__ */ jsxs34(
                       "div",
                       {
                         className: "flex items-center shrink-0",
                         style: { gap: "var(--spacing-3xl)" },
                         children: [
-                          /* @__PURE__ */ jsx41("div", { style: { width: 120, flexShrink: 0 }, children: /* @__PURE__ */ jsx41(
+                          /* @__PURE__ */ jsx42("div", { style: { width: 120, flexShrink: 0 }, children: /* @__PURE__ */ jsx42(
                             ScPairtext,
                             {
-                              icon: /* @__PURE__ */ jsx41(SiconTeam4, { className: "w-6 h-6", color: PRIMARY_ICON }),
+                              icon: /* @__PURE__ */ jsx42(SiconTeam4, { className: "w-6 h-6", color: PRIMARY_ICON }),
                               content: workspace.userCount || "\u2013",
                               iconPosition: "left",
                               type: "icon"
                             }
                           ) }),
-                          /* @__PURE__ */ jsx41(ScVDivider, {}),
-                          /* @__PURE__ */ jsxs33(
+                          /* @__PURE__ */ jsx42(ScVDivider, {}),
+                          /* @__PURE__ */ jsxs34(
                             "div",
                             {
                               className: "flex items-center",
@@ -3146,14 +3385,14 @@ function WorkspaceRow({
                                 gap: "var(--spacing-md)"
                               },
                               children: [
-                                /* @__PURE__ */ jsx41(
+                                /* @__PURE__ */ jsx42(
                                   SiconCrown,
                                   {
                                     className: "w-6 h-6 shrink-0",
                                     color: PRIMARY_ICON
                                   }
                                 ),
-                                /* @__PURE__ */ jsx41(
+                                /* @__PURE__ */ jsx42(
                                   "span",
                                   {
                                     className: "truncate",
@@ -3175,7 +3414,7 @@ function WorkspaceRow({
                   ]
                 }
               ),
-              workspace.isCurrent ? /* @__PURE__ */ jsx41(
+              workspace.isCurrent ? /* @__PURE__ */ jsx42(
                 ScButton,
                 {
                   text: currentWorkspaceText,
@@ -3184,14 +3423,14 @@ function WorkspaceRow({
                   size: "lg",
                   style: { width: 200, flexShrink: 0, opacity: 0.5 }
                 }
-              ) : /* @__PURE__ */ jsx41(
+              ) : /* @__PURE__ */ jsx42(
                 ScButton,
                 {
                   text: switchWorkspaceText,
                   variant: "secondary",
                   size: "lg",
                   styleVariant: "icon-left",
-                  icon: /* @__PURE__ */ jsx41(SiconSwitch, { className: "w-5 h-5", color: PRIMARY_ICON }),
+                  icon: /* @__PURE__ */ jsx42(SiconSwitch, { className: "w-5 h-5", color: PRIMARY_ICON }),
                   style: { width: 200, flexShrink: 0 },
                   onClick: onSwitch
                 }
@@ -3225,7 +3464,7 @@ function StreamoidWorkspaceSwitcher({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center",
@@ -3233,7 +3472,7 @@ function StreamoidWorkspaceSwitcher({
       onClick: (e) => {
         if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs34(
         "div",
         {
           ref: modalRef,
@@ -3246,14 +3485,14 @@ function StreamoidWorkspaceSwitcher({
             height: "60vh"
           },
           children: [
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(
               "div",
               {
                 className: "shrink-0 w-full relative",
                 style: {
                   borderBottom: "1px solid var(--alias-border-divider)"
                 },
-                children: /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs33(
+                children: /* @__PURE__ */ jsx42("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs34(
                   "div",
                   {
                     className: "flex items-center w-full",
@@ -3262,7 +3501,7 @@ function StreamoidWorkspaceSwitcher({
                       padding: "var(--spacing-3xl) var(--spacing-6xl)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx41(
+                      /* @__PURE__ */ jsx42(
                         "p",
                         {
                           className: "flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
@@ -3276,20 +3515,20 @@ function StreamoidWorkspaceSwitcher({
                           children: title
                         }
                       ),
-                      /* @__PURE__ */ jsx41("div", { className: "shrink-0 cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx41(SiconClose, { className: "w-6 h-6", color: PRIMARY_ICON }) })
+                      /* @__PURE__ */ jsx42("div", { className: "shrink-0 cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx42(SiconClose2, { className: "w-6 h-6", color: PRIMARY_ICON }) })
                     ]
                   }
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(
               "div",
               {
                 className: "flex-1 min-h-0 w-full overflow-y-auto",
                 style: {
                   borderRadius: "0 0 var(--radius-4xl) var(--radius-4xl)"
                 },
-                children: /* @__PURE__ */ jsxs33(
+                children: /* @__PURE__ */ jsxs34(
                   "div",
                   {
                     className: "flex flex-col items-start",
@@ -3298,7 +3537,7 @@ function StreamoidWorkspaceSwitcher({
                       gap: "var(--spacing-3xl)"
                     },
                     children: [
-                      loading && workspaces.length === 0 ? /* @__PURE__ */ jsx41(
+                      loading && workspaces.length === 0 ? /* @__PURE__ */ jsx42(
                         "p",
                         {
                           style: {
@@ -3309,7 +3548,7 @@ function StreamoidWorkspaceSwitcher({
                           children: loadingText
                         }
                       ) : null,
-                      workspaces.map((ws) => /* @__PURE__ */ jsx41(
+                      workspaces.map((ws) => /* @__PURE__ */ jsx42(
                         WorkspaceRow,
                         {
                           workspace: ws,
@@ -3348,23 +3587,23 @@ var ScAppListingCard_default = {
 
 // src/SC-app listing card/ScAppListingCard.tsx
 import { SiconCart } from "@streamoid/icons";
-import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 var ScAppListingCard = ({
-  icon = /* @__PURE__ */ jsx42(SiconCart, { className: ScAppListingCard_default.siconCartInstance }),
+  icon = /* @__PURE__ */ jsx43(SiconCart, { className: ScAppListingCard_default.siconCartInstance }),
   title = "Stores",
   descrp = "Centralized product and asset management for every storefront",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs34("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs34("div", { className: ScAppListingCard_default.header, children: [
-      /* @__PURE__ */ jsx42("div", { className: ScAppListingCard_default.iconContainer, children: icon }),
-      /* @__PURE__ */ jsxs34("div", { className: ScAppListingCard_default.title, children: [
+  return /* @__PURE__ */ jsxs35("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs35("div", { className: ScAppListingCard_default.header, children: [
+      /* @__PURE__ */ jsx43("div", { className: ScAppListingCard_default.iconContainer, children: icon }),
+      /* @__PURE__ */ jsxs35("div", { className: ScAppListingCard_default.title, children: [
         title,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ jsxs34("div", { className: ScAppListingCard_default.description, children: [
+    /* @__PURE__ */ jsxs35("div", { className: ScAppListingCard_default.description, children: [
       descrp,
       " "
     ] })
@@ -3382,22 +3621,22 @@ var ScAppCard_default = {
 
 // src/SC-appCard/ScAppCard.tsx
 import { SiconArtifacts as SiconArtifacts2 } from "@streamoid/icons";
-import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 var ScAppCard = ({
-  appIcon = /* @__PURE__ */ jsx43(SiconArtifacts2, { className: ScAppCard_default.siconArtifactsInstance }),
+  appIcon = /* @__PURE__ */ jsx44(SiconArtifacts2, { className: ScAppCard_default.siconArtifactsInstance }),
   appName = "Artifax",
   appDescription = "Info about artifax",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx43("div", { className: ScAppCard_default.iconContainer, children: appIcon }),
-    /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.textContainer, children: [
-      /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.title, children: [
+  return /* @__PURE__ */ jsxs36("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx44("div", { className: ScAppCard_default.iconContainer, children: appIcon }),
+    /* @__PURE__ */ jsxs36("div", { className: ScAppCard_default.textContainer, children: [
+      /* @__PURE__ */ jsxs36("div", { className: ScAppCard_default.title, children: [
         appName,
         " "
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.subtitle, children: [
+      /* @__PURE__ */ jsxs36("div", { className: ScAppCard_default.subtitle, children: [
         appDescription,
         " "
       ] })
@@ -3424,9 +3663,9 @@ var ScAppCardV3_default = {
 
 // src/SC-AppCardV3/ScAppCardV3.tsx
 import { SiconCart as SiconCart2 } from "@streamoid/icons";
-import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 var ScAppCardV3 = ({
-  appIcon = /* @__PURE__ */ jsx44(SiconCart2, { className: ScAppCardV3_default.iconPillIcon }),
+  appIcon = /* @__PURE__ */ jsx45(SiconCart2, { className: ScAppCardV3_default.iconPillIcon }),
   appName = "Stores",
   description = "Centralized product and asset management for every storefront",
   active = false,
@@ -3438,25 +3677,25 @@ var ScAppCardV3 = ({
     ScAppCardV3_default.scAppCardV3,
     active ? ScAppCardV3_default.scAppCardV3Active : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: [ScAppCardV3_default.cardBorder, className || ""].filter(Boolean).join(" "),
       style,
       ...props,
-      children: /* @__PURE__ */ jsxs36("div", { className: cardClass, children: [
-        /* @__PURE__ */ jsx44("div", { className: ScAppCardV3_default.glow }),
-        /* @__PURE__ */ jsx44("div", { className: ScAppCardV3_default.glowHover }),
-        /* @__PURE__ */ jsxs36("div", { className: ScAppCardV3_default.header, children: [
-          /* @__PURE__ */ jsxs36("div", { className: ScAppCardV3_default.iconRow, children: [
-            /* @__PURE__ */ jsx44("p", { className: ScAppCardV3_default.appName, children: appName }),
-            /* @__PURE__ */ jsxs36("div", { className: ScAppCardV3_default.iconPill, children: [
-              /* @__PURE__ */ jsx44("div", { className: ScAppCardV3_default.iconPillBg }),
-              /* @__PURE__ */ jsx44("div", { className: ScAppCardV3_default.iconPillIcon, children: appIcon }),
-              /* @__PURE__ */ jsx44("div", { className: ScAppCardV3_default.iconPillShadow })
+      children: /* @__PURE__ */ jsxs37("div", { className: cardClass, children: [
+        /* @__PURE__ */ jsx45("div", { className: ScAppCardV3_default.glow }),
+        /* @__PURE__ */ jsx45("div", { className: ScAppCardV3_default.glowHover }),
+        /* @__PURE__ */ jsxs37("div", { className: ScAppCardV3_default.header, children: [
+          /* @__PURE__ */ jsxs37("div", { className: ScAppCardV3_default.iconRow, children: [
+            /* @__PURE__ */ jsx45("p", { className: ScAppCardV3_default.appName, children: appName }),
+            /* @__PURE__ */ jsxs37("div", { className: ScAppCardV3_default.iconPill, children: [
+              /* @__PURE__ */ jsx45("div", { className: ScAppCardV3_default.iconPillBg }),
+              /* @__PURE__ */ jsx45("div", { className: ScAppCardV3_default.iconPillIcon, children: appIcon }),
+              /* @__PURE__ */ jsx45("div", { className: ScAppCardV3_default.iconPillShadow })
             ] })
           ] }),
-          /* @__PURE__ */ jsx44("p", { className: ScAppCardV3_default.description, children: description })
+          /* @__PURE__ */ jsx45("p", { className: ScAppCardV3_default.description, children: description })
         ] })
       ] })
     }
@@ -3494,7 +3733,7 @@ var ScToggleSwitch_default = {
 };
 
 // src/SC-toggleSwitch/ScToggleSwitch.tsx
-import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var ScToggleSwitch = ({
   active = "false",
   checked,
@@ -3504,7 +3743,7 @@ var ScToggleSwitch = ({
 }) => {
   const isActive = checked !== void 0 ? checked : active === "true";
   const variantsClassName = ScToggleSwitch_default["active-" + (isActive ? "true" : "false")];
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       className: ScToggleSwitch_default.scToggleSwitch + " " + className + " " + variantsClassName,
@@ -3514,20 +3753,20 @@ var ScToggleSwitch = ({
         props.onClick?.(e);
       },
       style: { cursor: "pointer", ...props.style },
-      children: isActive ? /* @__PURE__ */ jsxs37("svg", { width: "40", height: "24", viewBox: "0 0 40 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx45("rect", { width: "40", height: "24", rx: "12", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
-        /* @__PURE__ */ jsx45("circle", { cx: "28", cy: "12", r: "10", fill: "var(--alias-text---icons-inverse, #101010)" })
-      ] }) : /* @__PURE__ */ jsxs37("svg", { width: "41", height: "25", viewBox: "0 0 41 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx45("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__ */ jsx45("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__ */ jsx45("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", fill: "var(--alias-fill-neutral-neutralactive, #313131)" })
+      children: isActive ? /* @__PURE__ */ jsxs38("svg", { width: "40", height: "24", viewBox: "0 0 40 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx46("rect", { width: "40", height: "24", rx: "12", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+        /* @__PURE__ */ jsx46("circle", { cx: "28", cy: "12", r: "10", fill: "var(--alias-text---icons-inverse, #101010)" })
+      ] }) : /* @__PURE__ */ jsxs38("svg", { width: "41", height: "25", viewBox: "0 0 41 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx46("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__ */ jsx46("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__ */ jsx46("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", fill: "var(--alias-fill-neutral-neutralactive, #313131)" })
       ] })
     }
   );
 };
 
 // src/SC-artifaxInvite/ScArtifaxInvite.tsx
-import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
 var ScArtifaxInvite = ({
   active = "true",
   appName = "Artifax",
@@ -3540,22 +3779,22 @@ var ScArtifaxInvite = ({
 }) => {
   const isEnabled = enabled !== void 0 ? enabled : active === "true";
   const variantsClassName = ScArtifaxInvite_default["active-" + (isEnabled ? "true" : "false")];
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: ScArtifaxInvite_default.scArtifaxInvite + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           ScAppCard,
           {
-            appIcon: appIcon || /* @__PURE__ */ jsx46(SiconArtifacts3, { className: ScArtifaxInvite_default.siconArtifactsInstance }),
+            appIcon: appIcon || /* @__PURE__ */ jsx47(SiconArtifacts3, { className: ScArtifaxInvite_default.siconArtifactsInstance }),
             appName,
             appDescription,
             className: ScArtifaxInvite_default.scAppCardInstance
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           ScToggleSwitch,
           {
             checked: isEnabled,
@@ -3581,12 +3820,12 @@ var ScPhtogenixInvite_default = {
 
 // src/SC-phtogenixInvite/ScPhtogenixInvite.tsx
 import { SiconArtifacts as SiconArtifacts4 } from "@streamoid/icons";
-import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 var ScPhtogenixInvite = ({
   active = "true",
   scAppCardappDescription = "Info about photogenix",
   scAppCardappName = "Photogenix",
-  scAppCardappIcon = /* @__PURE__ */ jsx47(SiconArtifacts4, { className: ScPhtogenixInvite_default.siconArtifactsInstance }),
+  scAppCardappIcon = /* @__PURE__ */ jsx48(SiconArtifacts4, { className: ScPhtogenixInvite_default.siconArtifactsInstance }),
   className,
   enabled,
   onToggle,
@@ -3594,12 +3833,12 @@ var ScPhtogenixInvite = ({
 }) => {
   const isEnabled = enabled !== void 0 ? enabled : active === "true";
   const variantsClassName = ScPhtogenixInvite_default["active-" + (isEnabled ? "true" : "false")];
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       className: ScPhtogenixInvite_default.scPhtogenixInvite + " " + className + " " + variantsClassName,
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           ScAppCard,
           {
             appIcon: scAppCardappIcon,
@@ -3608,7 +3847,7 @@ var ScPhtogenixInvite = ({
             className: ScPhtogenixInvite_default.scAppCardInstance
           }
         ),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           ScToggleSwitch,
           {
             checked: isEnabled,
@@ -3658,10 +3897,10 @@ var ScOnlyField_default = {
 
 // src/SC-onlyField/ScOnlyField.tsx
 import { SiconBolt as SiconBolt4 } from "@streamoid/icons";
-import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 var ScOnlyField = ({
-  tfRightIcon = /* @__PURE__ */ jsx48(SiconBolt4, { className: ScOnlyField_default.siconBoltInstance }),
-  tfLeftIcon = /* @__PURE__ */ jsx48(SiconBolt4, { className: ScOnlyField_default.siconBoltInstance }),
+  tfRightIcon = /* @__PURE__ */ jsx49(SiconBolt4, { className: ScOnlyField_default.siconBoltInstance }),
+  tfLeftIcon = /* @__PURE__ */ jsx49(SiconBolt4, { className: ScOnlyField_default.siconBoltInstance }),
   state = "default",
   tfGroup = "icon-right",
   labelGroup = "none",
@@ -3674,14 +3913,14 @@ var ScOnlyField = ({
   ...props
 }) => {
   const variantsClassName = ScOnlyField_default["state-" + state] + " " + ScOnlyField_default["tf-group-" + tfGroup] + " " + ScOnlyField_default["label-group-" + labelGroup] + (size !== "default" ? " " + ScOnlyField_default["size-" + size] : "");
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: ScOnlyField_default.scOnlyField + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs40("div", { className: ScOnlyField_default.inputContainer, children: [
-        (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx48("div", { className: ScOnlyField_default.iconWrapper, children: tfLeftIcon }),
-        /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsxs41("div", { className: ScOnlyField_default.inputContainer, children: [
+        (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx49("div", { className: ScOnlyField_default.iconWrapper, children: tfLeftIcon }),
+        /* @__PURE__ */ jsx49(
           "input",
           {
             className: ScOnlyField_default.inputText,
@@ -3701,7 +3940,7 @@ var ScOnlyField = ({
             ...inputProps
           }
         ),
-        (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx48("div", { className: ScOnlyField_default.iconWrapper, children: tfRightIcon })
+        (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx49("div", { className: ScOnlyField_default.iconWrapper, children: tfRightIcon })
       ] })
     }
   );
@@ -3709,7 +3948,7 @@ var ScOnlyField = ({
 
 // src/SC-catalogixInvite/ScCatalogixInvite.tsx
 import { SiconHome as SiconHome10 } from "@streamoid/icons";
-import { Fragment as Fragment15, jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 var ScCatalogixInvite = ({
   active = "false",
   appName = "Catalogix",
@@ -3731,23 +3970,23 @@ var ScCatalogixInvite = ({
   const isEnabled = enabled !== void 0 ? enabled : active === "true";
   const variantsClassName = ScCatalogixInvite_default["active-" + (isEnabled ? "true" : "false")];
   const displayCount = selectedStores ? `${selectedStores.length} Selected` : selectedCount;
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       className: ScCatalogixInvite_default.scCatalogixInvite + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs41("div", { className: ScCatalogixInvite_default.appHeader, children: [
-          /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsxs42("div", { className: ScCatalogixInvite_default.appHeader, children: [
+          /* @__PURE__ */ jsx50(
             ScAppCard,
             {
-              appIcon: appIcon || /* @__PURE__ */ jsx49(SiconArtifacts5, { className: ScCatalogixInvite_default.siconArtifactsInstance }),
+              appIcon: appIcon || /* @__PURE__ */ jsx50(SiconArtifacts5, { className: ScCatalogixInvite_default.siconArtifactsInstance }),
               appDescription,
               appName,
               className: ScCatalogixInvite_default.scAppCardInstance
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             ScToggleSwitch,
             {
               checked: isEnabled,
@@ -3756,29 +3995,29 @@ var ScCatalogixInvite = ({
             }
           )
         ] }),
-        isEnabled && /* @__PURE__ */ jsx49(Fragment15, { children: /* @__PURE__ */ jsxs41("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
-          /* @__PURE__ */ jsxs41("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
-            /* @__PURE__ */ jsxs41("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
+        isEnabled && /* @__PURE__ */ jsx50(Fragment15, { children: /* @__PURE__ */ jsxs42("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
+          /* @__PURE__ */ jsxs42("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
+            /* @__PURE__ */ jsxs42("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
               storeAccessTitle,
               " "
             ] }),
-            /* @__PURE__ */ jsxs41("div", { className: ScCatalogixInvite_default.selectedCount, children: [
+            /* @__PURE__ */ jsxs42("div", { className: ScCatalogixInvite_default.selectedCount, children: [
               displayCount,
               " "
             ] })
           ] }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             ScOnlyField,
             {
-              tfLeftIcon: /* @__PURE__ */ jsx49(SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
-              tfRightIcon: /* @__PURE__ */ jsx49(SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
+              tfLeftIcon: /* @__PURE__ */ jsx50(SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
+              tfRightIcon: /* @__PURE__ */ jsx50(SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
               placeholderFilled: searchPlaceholder,
               value: searchValue,
               onInputChange: onSearchChange,
               className: ScCatalogixInvite_default.scOnlyFieldInstance
             }
           ),
-          /* @__PURE__ */ jsx49("div", { className: ScCatalogixInvite_default.storeListContainer, children: stores ? stores.length > 0 ? stores.map((store) => /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50("div", { className: ScCatalogixInvite_default.storeListContainer, children: stores ? stores.length > 0 ? stores.map((store) => /* @__PURE__ */ jsx50(
             ScPairtext,
             {
               content: store.name,
@@ -3789,53 +4028,53 @@ var ScCatalogixInvite = ({
               className: ScCatalogixInvite_default.scPairtextInstance
             },
             store.id
-          )) : /* @__PURE__ */ jsx49("div", { style: {
+          )) : /* @__PURE__ */ jsx50("div", { style: {
             padding: "var(--spacing-3xl, 16px)",
             color: "var(--alias-text-and-icons-muted, #7a7a7a)",
             fontFamily: "var(--font-family-font-family-body, Inter, sans-serif)",
             fontSize: "var(--font-size-font-size-sm, 14px)",
             lineHeight: "var(--line-height-line-height-sm, 20px)"
-          }, children: "No stores found" }) : /* @__PURE__ */ jsxs41(Fragment15, { children: [
-            /* @__PURE__ */ jsx49(
+          }, children: "No stores found" }) : /* @__PURE__ */ jsxs42(Fragment15, { children: [
+            /* @__PURE__ */ jsx50(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ jsx49(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ jsx50(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx50(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ jsx49(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ jsx50(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx50(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ jsx49(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ jsx50(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx50(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ jsx49(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ jsx50(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             ),
-            /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx50(
               ScPairtext,
               {
-                icon: /* @__PURE__ */ jsx49(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
+                icon: /* @__PURE__ */ jsx50(SiconHome10, { className: ScCatalogixInvite_default.siconHomeInstance }),
                 iconPosition: "right",
                 type: "checkbox",
                 className: ScCatalogixInvite_default.scPairtextInstance
@@ -3849,7 +4088,7 @@ var ScCatalogixInvite = ({
 };
 
 // src/SC-appField/ScAppField.tsx
-import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var ScAppField = ({
   appFieldTitle = "App permission",
   className,
@@ -3866,13 +4105,13 @@ var ScAppField = ({
   onCatalogixSearchChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs42("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx50("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ jsxs42("div", { className: ScAppField_default.title, children: [
+  return /* @__PURE__ */ jsxs43("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx51("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ jsxs43("div", { className: ScAppField_default.title, children: [
       appFieldTitle,
       " "
     ] }) }),
-    /* @__PURE__ */ jsxs42("div", { className: ScAppField_default.inputContainer, children: [
-      /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsxs43("div", { className: ScAppField_default.inputContainer, children: [
+      /* @__PURE__ */ jsx51(
         ScArtifaxInvite,
         {
           enabled: artifaxEnabled,
@@ -3880,18 +4119,18 @@ var ScAppField = ({
           className: ScAppField_default.scArtifaxInviteInstance
         }
       ),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         ScPhtogenixInvite,
         {
           enabled: photogenixEnabled,
           onToggle: onPhotogenixToggle,
           scAppCardappDescription: "Info about photogenix",
           scAppCardappName: "Photogenix",
-          scAppCardappIcon: /* @__PURE__ */ jsx50(SiconPhotogenix2, { className: ScAppField_default.siconPhotogenixInstance }),
+          scAppCardappIcon: /* @__PURE__ */ jsx51(SiconPhotogenix2, { className: ScAppField_default.siconPhotogenixInstance }),
           className: ScAppField_default.scPhtogenixInviteInstance
         }
       ),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         ScCatalogixInvite,
         {
           enabled: catalogixEnabled,
@@ -3918,13 +4157,13 @@ var ScBillingHistoryHeader_default = {
 };
 
 // src/SC-billingHistoryHeader/ScBillingHistoryHeader.tsx
-import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 var ScBillingHistoryHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs43("div", { className: ScBillingHistoryHeader_default.scBillingHistoryHeader + " " + className, children: [
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs44("div", { className: ScBillingHistoryHeader_default.scBillingHistoryHeader + " " + className, children: [
+    /* @__PURE__ */ jsx52(
       ScHeader,
       {
         text: "Invoice",
@@ -3932,7 +4171,7 @@ var ScBillingHistoryHeader = ({
         className: ScBillingHistoryHeader_default.scHeaderInstance
       }
     ),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       ScHeader,
       {
         text: "Amount",
@@ -3940,7 +4179,7 @@ var ScBillingHistoryHeader = ({
         className: ScBillingHistoryHeader_default.scHeaderInstance2
       }
     ),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       ScHeader,
       {
         text: "Date",
@@ -3948,7 +4187,7 @@ var ScBillingHistoryHeader = ({
         className: ScBillingHistoryHeader_default.scHeaderInstance2
       }
     ),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       ScHeader,
       {
         text: "Action",
@@ -3970,19 +4209,19 @@ var ScCheckField_default = {
 
 // src/SC-checkField/ScCheckField.tsx
 import { SiconHome as SiconHome11 } from "@streamoid/icons";
-import { Fragment as Fragment16, jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
 var ScCheckField = ({
   label = "Label",
   className,
   checkboxes,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs44("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx52("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ jsxs44("div", { className: ScCheckField_default.label, children: [
+  return /* @__PURE__ */ jsxs45("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx53("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ jsxs45("div", { className: ScCheckField_default.label, children: [
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ jsx52("div", { className: ScCheckField_default.tabSwitcher, children: checkboxes ? checkboxes.map((item, i) => /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53("div", { className: ScCheckField_default.tabSwitcher, children: checkboxes ? checkboxes.map((item, i) => /* @__PURE__ */ jsx53(
       ScPairtext,
       {
         content: item.label,
@@ -3992,19 +4231,19 @@ var ScCheckField = ({
         className: ScCheckField_default.scPairtextInstance
       },
       i
-    )) : /* @__PURE__ */ jsxs44(Fragment16, { children: [
-      /* @__PURE__ */ jsx52(
+    )) : /* @__PURE__ */ jsxs45(Fragment16, { children: [
+      /* @__PURE__ */ jsx53(
         ScPairtext,
         {
-          icon: /* @__PURE__ */ jsx52(SiconHome11, { className: ScCheckField_default.siconHomeInstance }),
+          icon: /* @__PURE__ */ jsx53(SiconHome11, { className: ScCheckField_default.siconHomeInstance }),
           type: "checkbox",
           className: ScCheckField_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsx53(
         ScPairtext,
         {
-          icon: /* @__PURE__ */ jsx52(SiconHome11, { className: ScCheckField_default.siconHomeInstance }),
+          icon: /* @__PURE__ */ jsx53(SiconHome11, { className: ScCheckField_default.siconHomeInstance }),
           type: "checkbox",
           className: ScCheckField_default.scPairtextInstance
         }
@@ -4025,9 +4264,9 @@ var ScFieldButton_default = {
 
 // src/SC-fieldButton/ScFieldButton.tsx
 import { SiconHome as SiconHome12 } from "@streamoid/icons";
-import { Fragment as Fragment17, jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
 var ScFieldButton = ({
-  icon = /* @__PURE__ */ jsx53(SiconHome12, { className: ScFieldButton_default.siconHomeInstance }),
+  icon = /* @__PURE__ */ jsx54(SiconHome12, { className: ScFieldButton_default.siconHomeInstance }),
   type = "default",
   state = "default",
   className,
@@ -4035,18 +4274,18 @@ var ScFieldButton = ({
   ...props
 }) => {
   const variantsClassName = ScFieldButton_default["type-" + type] + " " + ScFieldButton_default["state-" + state];
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
       className: ScFieldButton_default.scFieldButton + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs45("div", { className: ScFieldButton_default.container, children: [
-        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ jsx53(Fragment17, { children: icon }),
-        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ jsx53(Fragment17, { children: /* @__PURE__ */ jsxs45("div", { className: ScFieldButton_default.label, children: [
+      children: /* @__PURE__ */ jsxs46("div", { className: ScFieldButton_default.container, children: [
+        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ jsx54(Fragment17, { children: icon }),
+        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ jsx54(Fragment17, { children: /* @__PURE__ */ jsxs46("div", { className: ScFieldButton_default.label, children: [
           text,
           " "
         ] }) }),
-        type === "icon-left" && /* @__PURE__ */ jsx53(Fragment17, { children: icon })
+        type === "icon-left" && /* @__PURE__ */ jsx54(Fragment17, { children: icon })
       ] })
     }
   );
@@ -4061,16 +4300,16 @@ var ScPendingAction_default = {
 
 // src/SC-pendingAction/ScPendingAction.tsx
 import { SiconHome as SiconHome13 } from "@streamoid/icons";
-import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs47 } from "react/jsx-runtime";
 var ScPendingAction = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs46("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs47("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx55(
       ScButton,
       {
-        icon: /* @__PURE__ */ jsx54(SiconHome13, { className: ScPendingAction_default.siconHomeInstance }),
+        icon: /* @__PURE__ */ jsx55(SiconHome13, { className: ScPendingAction_default.siconHomeInstance }),
         text: "Cancel",
         variant: "error",
         type: "tertiary",
@@ -4078,11 +4317,11 @@ var ScPendingAction = ({
         className: ScPendingAction_default.scButtonInstance
       }
     ),
-    /* @__PURE__ */ jsx54(ScVDivider, { className: ScPendingAction_default.scVDividerInstance }),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(ScVDivider, { className: ScPendingAction_default.scVDividerInstance }),
+    /* @__PURE__ */ jsx55(
       ScButton,
       {
-        icon: /* @__PURE__ */ jsx54(SiconHome13, { className: ScPendingAction_default.siconHomeInstance }),
+        icon: /* @__PURE__ */ jsx55(SiconHome13, { className: ScPendingAction_default.siconHomeInstance }),
         text: "Resend",
         variant: "tertiary",
         size: "sm",
@@ -4106,7 +4345,7 @@ var ScQuickPrompt_default = {
 
 // src/SC-quick prompt/ScQuickPrompt.tsx
 import { SiconBolt as SiconBolt5 } from "@streamoid/icons";
-import { jsx as jsx55, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
 var ScQuickPrompt = ({
   appName = "Photogenix",
   heading = "Swap Model and Background",
@@ -4114,20 +4353,20 @@ var ScQuickPrompt = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs47("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs47("div", { className: ScQuickPrompt_default.header, children: [
-      /* @__PURE__ */ jsx55("div", { className: ScQuickPrompt_default.iconContainer, children: /* @__PURE__ */ jsx55(SiconBolt5, { className: ScQuickPrompt_default.siconBoltInstance }) }),
-      /* @__PURE__ */ jsx55("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ jsxs47("div", { className: ScQuickPrompt_default.title, children: [
+  return /* @__PURE__ */ jsxs48("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs48("div", { className: ScQuickPrompt_default.header, children: [
+      /* @__PURE__ */ jsx56("div", { className: ScQuickPrompt_default.iconContainer, children: /* @__PURE__ */ jsx56(SiconBolt5, { className: ScQuickPrompt_default.siconBoltInstance }) }),
+      /* @__PURE__ */ jsx56("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ jsxs48("div", { className: ScQuickPrompt_default.title, children: [
         appName,
         " "
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs47("div", { className: ScQuickPrompt_default.body, children: [
-      /* @__PURE__ */ jsxs47("div", { className: ScQuickPrompt_default.heading, children: [
+    /* @__PURE__ */ jsxs48("div", { className: ScQuickPrompt_default.body, children: [
+      /* @__PURE__ */ jsxs48("div", { className: ScQuickPrompt_default.heading, children: [
         heading,
         " "
       ] }),
-      /* @__PURE__ */ jsxs47("div", { className: ScQuickPrompt_default.description, children: [
+      /* @__PURE__ */ jsxs48("div", { className: ScQuickPrompt_default.description, children: [
         description,
         " "
       ] })
@@ -4144,13 +4383,13 @@ var ScReferralTableHeader_default = {
 };
 
 // src/SC-referralTableHeader/ScReferralTableHeader.tsx
-import { jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 var ScReferralTableHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs48("div", { className: ScReferralTableHeader_default.scReferralTableHeader + " " + className, children: [
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs49("div", { className: ScReferralTableHeader_default.scReferralTableHeader + " " + className, children: [
+    /* @__PURE__ */ jsx57(
       ScHeader,
       {
         text: "User",
@@ -4158,7 +4397,7 @@ var ScReferralTableHeader = ({
         className: ScReferralTableHeader_default.scHeaderInstance
       }
     ),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       ScHeader,
       {
         text: "Date",
@@ -4166,7 +4405,7 @@ var ScReferralTableHeader = ({
         className: ScReferralTableHeader_default.scHeaderInstance2
       }
     ),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       ScHeader,
       {
         text: "Status",
@@ -4174,7 +4413,7 @@ var ScReferralTableHeader = ({
         className: ScReferralTableHeader_default.scHeaderInstance3
       }
     ),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       ScHeader,
       {
         text: "Reward",
@@ -4195,7 +4434,7 @@ var ScReferralTableList_default = {
 };
 
 // src/SC-referralTableList/ScReferralTableList.tsx
-import { jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 var ScReferralTableList = ({
   userEmail = "chris@kepler.com",
   userName,
@@ -4205,8 +4444,8 @@ var ScReferralTableList = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs49("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs50("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx58(
       ScProfile,
       {
         subText: userEmail,
@@ -4214,12 +4453,12 @@ var ScReferralTableList = ({
         className: ScReferralTableList_default.scProfileInstance
       }
     ),
-    /* @__PURE__ */ jsxs49("div", { className: ScReferralTableList_default.date, children: [
+    /* @__PURE__ */ jsxs50("div", { className: ScReferralTableList_default.date, children: [
       date,
       " "
     ] }),
-    /* @__PURE__ */ jsx57(ScBadges, { text: status, className: ScReferralTableList_default.scBadgesInstance }),
-    /* @__PURE__ */ jsxs49("div", { className: ScReferralTableList_default.points, children: [
+    /* @__PURE__ */ jsx58(ScBadges, { text: status, className: ScReferralTableList_default.scBadgesInstance }),
+    /* @__PURE__ */ jsxs50("div", { className: ScReferralTableList_default.points, children: [
       points,
       " "
     ] })
@@ -4235,33 +4474,33 @@ var ScSettingsNav_default = {
 // src/SC-settingsNav/ScSettingsNav.tsx
 import { SiconTeam as SiconTeam5 } from "@streamoid/icons";
 import { SiconWorkspace, SiconReferral } from "@streamoid/icons";
-import { jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
 var ScSettingsNav = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx58("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ jsxs50("div", { className: ScSettingsNav_default.container, children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ jsxs51("div", { className: ScSettingsNav_default.container, children: [
+    /* @__PURE__ */ jsx59(
       ScSidebarMenu,
       {
-        icon: /* @__PURE__ */ jsx58(SiconTeam5, { className: ScSettingsNav_default.siconTeamInstance }),
+        icon: /* @__PURE__ */ jsx59(SiconTeam5, { className: ScSettingsNav_default.siconTeamInstance }),
         text: "Profile",
         state: "active",
         className: ScSettingsNav_default.scSidebarMenuInstance
       }
     ),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx59(
       ScSidebarMenu,
       {
-        icon: /* @__PURE__ */ jsx58(SiconWorkspace, { className: ScSettingsNav_default.siconWorkspaceInstance }),
+        icon: /* @__PURE__ */ jsx59(SiconWorkspace, { className: ScSettingsNav_default.siconWorkspaceInstance }),
         text: "Workspace",
         className: ScSettingsNav_default.scSidebarMenuInstance
       }
     ),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx59(
       ScSidebarMenu,
       {
-        icon: /* @__PURE__ */ jsx58(SiconReferral, { className: ScSettingsNav_default.siconReferralInstance }),
+        icon: /* @__PURE__ */ jsx59(SiconReferral, { className: ScSettingsNav_default.siconReferralInstance }),
         text: "Referral",
         className: ScSettingsNav_default.scSidebarMenuInstance
       }
@@ -4277,7 +4516,7 @@ var ScTabField_default = {
 };
 
 // src/SC-tabField/ScTabField.tsx
-import { jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
 var ScTabField = ({
   label = "Label",
   className,
@@ -4286,17 +4525,17 @@ var ScTabField = ({
   onTabChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs51("div", { className: ScTabField_default.scTabField + " " + className, children: [
-    /* @__PURE__ */ jsx59("div", { className: ScTabField_default.labelContainer, children: /* @__PURE__ */ jsxs51("div", { className: ScTabField_default.label, children: [
+  return /* @__PURE__ */ jsxs52("div", { className: ScTabField_default.scTabField + " " + className, children: [
+    /* @__PURE__ */ jsx60("div", { className: ScTabField_default.labelContainer, children: /* @__PURE__ */ jsxs52("div", { className: ScTabField_default.label, children: [
       label,
       " "
     ] }) }),
-    tabs ? /* @__PURE__ */ jsx59(
+    tabs ? /* @__PURE__ */ jsx60(
       ScTabSwitcher,
       {
         tabCount: String(tabs.length),
         className: ScTabField_default.scTabSwitcherInstance,
-        component: tabs[0] ? /* @__PURE__ */ jsx59(
+        component: tabs[0] ? /* @__PURE__ */ jsx60(
           ScTabComp,
           {
             text: tabs[0].label,
@@ -4306,7 +4545,7 @@ var ScTabField = ({
             style: { flex: 1 }
           }
         ) : void 0,
-        component2: tabs[1] ? /* @__PURE__ */ jsx59(
+        component2: tabs[1] ? /* @__PURE__ */ jsx60(
           ScTabComp,
           {
             text: tabs[1].label,
@@ -4317,7 +4556,7 @@ var ScTabField = ({
           }
         ) : void 0
       }
-    ) : /* @__PURE__ */ jsx59(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
+    ) : /* @__PURE__ */ jsx60(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
   ] });
 };
 
@@ -4334,19 +4573,19 @@ var ScTableHeader_default = {
 };
 
 // src/SC-tableHeader/ScTableHeader.tsx
-import { Fragment as Fragment18, jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx61, jsxs as jsxs53 } from "react/jsx-runtime";
 var ScTableHeader = ({
   type = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScTableHeader_default["type-" + type];
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs53(
     "div",
     {
       className: ScTableHeader_default.scTableHeader + " " + className + " " + variantsClassName,
       children: [
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           ScHeader,
           {
             text: "User",
@@ -4354,7 +4593,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance
           }
         ),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           ScHeader,
           {
             text: "Role",
@@ -4362,7 +4601,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance2
           }
         ),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           ScHeader,
           {
             text: "Access",
@@ -4370,7 +4609,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance3
           }
         ),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           ScHeader,
           {
             text: "Invited by",
@@ -4378,7 +4617,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance4
           }
         ),
-        type === "pending" && /* @__PURE__ */ jsx60(Fragment18, { children: /* @__PURE__ */ jsx60(
+        type === "pending" && /* @__PURE__ */ jsx61(Fragment18, { children: /* @__PURE__ */ jsx61(
           ScHeader,
           {
             text: "Invite action",
@@ -4386,7 +4625,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance5
           }
         ) }),
-        type === "default" && /* @__PURE__ */ jsx60(Fragment18, { children: /* @__PURE__ */ jsx60(
+        type === "default" && /* @__PURE__ */ jsx61(Fragment18, { children: /* @__PURE__ */ jsx61(
           ScHeader,
           {
             text: "Signed On",
@@ -4420,7 +4659,7 @@ var ScTableList_default = {
 // src/SC-tableList/ScTableList.tsx
 import { SiconArtifacts as SiconArtifacts6, SiconPhotogenix as SiconPhotogenix3 } from "@streamoid/icons";
 import { SiconUserAdd, SiconCoins } from "@streamoid/icons";
-import { Fragment as Fragment19, jsx as jsx61, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx62, jsxs as jsxs54 } from "react/jsx-runtime";
 var ScTableList = ({
   invitedBy = "Rohan",
   signedOn = "Nov 9th, 2025",
@@ -4432,51 +4671,51 @@ var ScTableList = ({
   ...props
 }) => {
   const variantsClassName = ScTableList_default["hover-" + hover] + " " + ScTableList_default["variant-" + variant];
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       className: ScTableList_default.scTableList + " " + className + " " + variantsClassName,
       onClick: (e) => onRowClick && onRowClick(invitedBy, e),
       ...props,
       children: [
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(
           ScProfile,
           {
             subText: userEmail,
             className: ScTableList_default.scProfileInstance
           }
         ),
-        /* @__PURE__ */ jsx61(ScRole, { className: ScTableList_default.scRoleInstance }),
-        /* @__PURE__ */ jsxs53("div", { className: ScTableList_default.accessInfo, children: [
-          /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(ScRole, { className: ScTableList_default.scRoleInstance }),
+        /* @__PURE__ */ jsxs54("div", { className: ScTableList_default.accessInfo, children: [
+          /* @__PURE__ */ jsx62(
             ScAccess,
             {
-              component: /* @__PURE__ */ jsx61(SiconArtifacts6, { className: ScTableList_default.siconArtifactsInstance }),
-              component2: /* @__PURE__ */ jsx61(SiconPhotogenix3, { className: ScTableList_default.siconPhotogenixInstance }),
+              component: /* @__PURE__ */ jsx62(SiconArtifacts6, { className: ScTableList_default.siconArtifactsInstance }),
+              component2: /* @__PURE__ */ jsx62(SiconPhotogenix3, { className: ScTableList_default.siconPhotogenixInstance }),
               className: ScTableList_default.scAccessInstance
             }
           ),
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx62(
             ScAccess,
             {
-              component: /* @__PURE__ */ jsx61(SiconUserAdd, { className: ScTableList_default.siconUserAddInstance }),
-              component2: /* @__PURE__ */ jsx61(SiconCoins, { className: ScTableList_default.siconCoinsInstance }),
+              component: /* @__PURE__ */ jsx62(SiconUserAdd, { className: ScTableList_default.siconUserAddInstance }),
+              component2: /* @__PURE__ */ jsx62(SiconCoins, { className: ScTableList_default.siconCoinsInstance }),
               visibleSiconCatalogix: false,
               className: ScTableList_default.scAccessInstance
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs53("div", { className: ScTableList_default.userName, children: [
+        /* @__PURE__ */ jsxs54("div", { className: ScTableList_default.userName, children: [
           invitedBy,
           " "
         ] }),
-        variant === "pending" && /* @__PURE__ */ jsx61(Fragment19, { children: /* @__PURE__ */ jsx61(
+        variant === "pending" && /* @__PURE__ */ jsx62(Fragment19, { children: /* @__PURE__ */ jsx62(
           ScPendingAction,
           {
             className: ScTableList_default.scPendingActionInstance
           }
         ) }),
-        variant === "active" && /* @__PURE__ */ jsx61(Fragment19, { children: /* @__PURE__ */ jsxs53("div", { className: ScTableList_default.date, children: [
+        variant === "active" && /* @__PURE__ */ jsx62(Fragment19, { children: /* @__PURE__ */ jsxs54("div", { className: ScTableList_default.date, children: [
           signedOn,
           " "
         ] }) })
@@ -4511,7 +4750,7 @@ import {
   SiconSwitch as SiconSwitch2,
   SiconLogout as SiconLogout2
 } from "@streamoid/icons";
-import { jsx as jsx62, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs55 } from "react/jsx-runtime";
 var ScWorkspaceCard = ({
   workspaceName = "Stores",
   role = "Admin",
@@ -4521,21 +4760,21 @@ var ScWorkspaceCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
-      /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
+      /* @__PURE__ */ jsx63(
         ScIntialProfileCover,
         {
           className: ScWorkspaceCard_default.scIntialProfileCoverInstance
         }
       ),
-      /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceCard_default.workspaceName, children: [
+      /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceCard_default.workspaceName, children: [
         workspaceName,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceCard_default.userInfo, children: [
-      /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceCard_default.userInfo, children: [
+      /* @__PURE__ */ jsx63(
         ScBadges,
         {
           text: role,
@@ -4543,41 +4782,41 @@ var ScWorkspaceCard = ({
           className: ScWorkspaceCard_default.scBadgesInstance
         }
       ),
-      /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceCard_default.userDetails, children: [
-        /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceCard_default.userDetails, children: [
+        /* @__PURE__ */ jsx63(
           ScPairtext,
           {
-            icon: /* @__PURE__ */ jsx62(SiconTeam6, { className: ScWorkspaceCard_default.siconTeamInstance }),
+            icon: /* @__PURE__ */ jsx63(SiconTeam6, { className: ScWorkspaceCard_default.siconTeamInstance }),
             content: userCount,
             className: ScWorkspaceCard_default.scPairtextInstance
           }
         ),
-        /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceCard_default.scVDividerInstance }),
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(ScVDivider, { className: ScWorkspaceCard_default.scVDividerInstance }),
+        /* @__PURE__ */ jsx63(
           ScPairtext,
           {
-            icon: /* @__PURE__ */ jsx62(SiconCrown2, { className: ScWorkspaceCard_default.siconCrownInstance }),
+            icon: /* @__PURE__ */ jsx63(SiconCrown2, { className: ScWorkspaceCard_default.siconCrownInstance }),
             content: ownerEmail,
             className: ScWorkspaceCard_default.scPairtextInstance
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63(
       ScButton,
       {
-        icon: /* @__PURE__ */ jsx62(SiconSwitch2, { className: ScWorkspaceCard_default.siconSwitchInstance }),
+        icon: /* @__PURE__ */ jsx63(SiconSwitch2, { className: ScWorkspaceCard_default.siconSwitchInstance }),
         text: buttonText,
         state: "disabled",
         variant: "outline",
         className: ScWorkspaceCard_default.scButtonInstance
       }
     ),
-    /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63(
       ScButton,
       {
         text: "Leave workspace",
-        icon: /* @__PURE__ */ jsx62(SiconLogout2, { className: ScWorkspaceCard_default.siconLogoutInstance }),
+        icon: /* @__PURE__ */ jsx63(SiconLogout2, { className: ScWorkspaceCard_default.siconLogoutInstance }),
         styleVariant: "icon-only",
         variant: "error",
         className: ScWorkspaceCard_default.scButtonInstance2
@@ -4587,7 +4826,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3, SiconLogout as SiconLogout3 } from "@streamoid/icons";
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -4613,7 +4852,7 @@ var ScWorkspaceSwitchCard_default = {
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { jsx as jsx63, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs56 } from "react/jsx-runtime";
 function ScWorkspaceSwitchCard({
   wsName = "Workspace name is kepler",
   role = "Admin",
@@ -4628,7 +4867,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = useState4(false);
+  const [internalHover, setInternalHover] = useState5(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -4643,14 +4882,14 @@ function ScWorkspaceSwitchCard({
   ].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__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     "div",
     {
       className: cardClass,
       onMouseEnter: () => setInternalHover(true),
       onMouseLeave: () => setInternalHover(false),
-      children: /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
-        /* @__PURE__ */ jsx63(
+      children: /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
+        /* @__PURE__ */ jsx64(
           ScDp,
           {
             type: imageUrl ? "image" : "initial",
@@ -4664,26 +4903,26 @@ function ScWorkspaceSwitchCard({
             }
           }
         ),
-        /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
-          /* @__PURE__ */ jsx63("p", { className: ScWorkspaceSwitchCard_default.wsName, children: wsName }),
-          /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
-            /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
-              /* @__PURE__ */ jsx63("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
-              /* @__PURE__ */ jsx63("span", { className: roleColorClass, children: displayRole })
+        /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
+          /* @__PURE__ */ jsx64("p", { className: ScWorkspaceSwitchCard_default.wsName, children: wsName }),
+          /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
+            /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+              /* @__PURE__ */ jsx64("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
+              /* @__PURE__ */ jsx64("span", { className: roleColorClass, children: displayRole })
             ] }),
-            /* @__PURE__ */ jsx63(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
-            /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
-              /* @__PURE__ */ jsx63("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Plan" }),
-              /* @__PURE__ */ jsx63("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan })
+            /* @__PURE__ */ jsx64(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
+            /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+              /* @__PURE__ */ jsx64("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Plan" }),
+              /* @__PURE__ */ jsx64("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan })
             ] }),
-            /* @__PURE__ */ jsx63(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
-            /* @__PURE__ */ jsxs55("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
-              /* @__PURE__ */ jsx63("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Workspace Owner" }),
-              /* @__PURE__ */ jsx63("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
+            /* @__PURE__ */ jsx64(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
+            /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
+              /* @__PURE__ */ jsx64("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Workspace Owner" }),
+              /* @__PURE__ */ jsx64("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
             ] })
           ] })
         ] }),
-        isHover && isOther && /* @__PURE__ */ jsx63(
+        isHover && isOther && /* @__PURE__ */ jsx64(
           "div",
           {
             onClick: (e) => {
@@ -4691,19 +4930,19 @@ function ScWorkspaceSwitchCard({
               onSwitch?.();
             },
             style: { cursor: "pointer" },
-            children: /* @__PURE__ */ jsx63(
+            children: /* @__PURE__ */ jsx64(
               ScButton,
               {
                 text: "Switch Workspace",
                 variant: "secondary",
                 size: "sm",
                 styleVariant: "icon-left",
-                icon: /* @__PURE__ */ jsx63(SiconSwitch3, { className: ScWorkspaceSwitchCard_default.btnIcon })
+                icon: /* @__PURE__ */ jsx64(SiconSwitch3, { className: ScWorkspaceSwitchCard_default.btnIcon })
               }
             )
           }
         ),
-        isHover && isAdmin && /* @__PURE__ */ jsx63(
+        isHover && isAdmin && /* @__PURE__ */ jsx64(
           "div",
           {
             onClick: (e) => {
@@ -4711,18 +4950,18 @@ function ScWorkspaceSwitchCard({
               onSettings?.();
             },
             style: { cursor: "pointer" },
-            children: /* @__PURE__ */ jsx63(
+            children: /* @__PURE__ */ jsx64(
               ScButton,
               {
                 styleVariant: "icon-only",
                 variant: "outline",
                 size: "sm",
-                icon: /* @__PURE__ */ jsx63(SiconSettings3, { className: ScWorkspaceSwitchCard_default.btnIcon })
+                icon: /* @__PURE__ */ jsx64(SiconSettings3, { className: ScWorkspaceSwitchCard_default.btnIcon })
               }
             )
           }
         ),
-        isHover && !isAdmin && /* @__PURE__ */ jsx63(
+        isHover && !isAdmin && /* @__PURE__ */ jsx64(
           "div",
           {
             className: ScWorkspaceSwitchCard_default.leaveBtn,
@@ -4730,7 +4969,7 @@ function ScWorkspaceSwitchCard({
               e.stopPropagation();
               onLeave?.();
             },
-            children: /* @__PURE__ */ jsx63(SiconLogout3, { className: ScWorkspaceSwitchCard_default.btnIcon, color: "currentColor" })
+            children: /* @__PURE__ */ jsx64(SiconLogout3, { className: ScWorkspaceSwitchCard_default.btnIcon, color: "currentColor" })
           }
         )
       ] })
@@ -4748,18 +4987,18 @@ var ScRoleMobile_default = {
 };
 
 // src/SC-Role-Mobile/ScRoleMobile.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var ScRoleMobile = ({
   role = "admin",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "div",
     {
       className: ScRoleMobile_default.scRoleMobile + " " + ScRoleMobile_default["role-" + role] + " " + className,
       ...props,
-      children: /* @__PURE__ */ jsx64("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
+      children: /* @__PURE__ */ jsx65("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
     }
   );
 };
@@ -4776,7 +5015,7 @@ var ScProfileV2Mobile_default = {
 };
 
 // src/SC-Profile-V2-Mobile/ScProfileV2Mobile.tsx
-import { jsx as jsx65, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
 var ScProfileV2Mobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -4786,17 +5025,17 @@ var ScProfileV2Mobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  const profileImage = /* @__PURE__ */ jsx65("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx65("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ jsx65("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
-  return /* @__PURE__ */ jsxs56(
+  const profileImage = /* @__PURE__ */ jsx66("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx66("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ jsx66("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
+  return /* @__PURE__ */ jsxs57(
     "div",
     {
       className: ScProfileV2Mobile_default.scProfileV2Mobile + " " + className,
       ...props,
       children: [
         dpPosition === "left" && profileImage,
-        /* @__PURE__ */ jsxs56("div", { className: ScProfileV2Mobile_default.userInfo, children: [
-          /* @__PURE__ */ jsx65("p", { className: ScProfileV2Mobile_default.userName, children: name }),
-          /* @__PURE__ */ jsx65("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
+        /* @__PURE__ */ jsxs57("div", { className: ScProfileV2Mobile_default.userInfo, children: [
+          /* @__PURE__ */ jsx66("p", { className: ScProfileV2Mobile_default.userName, children: name }),
+          /* @__PURE__ */ jsx66("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
         ] }),
         dpPosition === "right" && profileImage
       ]
@@ -4823,7 +5062,7 @@ var ScTableListMobile_default = {
 };
 
 // src/SC-tableList-mobile/ScTableListMobile.tsx
-import { jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
 var ScTableListMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -4836,25 +5075,25 @@ var ScTableListMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs58(
     "div",
     {
       className: ScTableListMobile_default.scTableListMobile + " " + className,
       onClick: onRowClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs57("div", { className: ScTableListMobile_default.profileRow, children: [
-          /* @__PURE__ */ jsxs57("div", { className: ScTableListMobile_default.userInfo, children: [
-            /* @__PURE__ */ jsx66("p", { className: ScTableListMobile_default.userName, children: name }),
-            /* @__PURE__ */ jsx66("p", { className: ScTableListMobile_default.userEmail, children: email })
+        /* @__PURE__ */ jsxs58("div", { className: ScTableListMobile_default.profileRow, children: [
+          /* @__PURE__ */ jsxs58("div", { className: ScTableListMobile_default.userInfo, children: [
+            /* @__PURE__ */ jsx67("p", { className: ScTableListMobile_default.userName, children: name }),
+            /* @__PURE__ */ jsx67("p", { className: ScTableListMobile_default.userEmail, children: email })
           ] }),
-          /* @__PURE__ */ jsx66("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx66("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ jsx66("div", { className: ScTableListMobile_default.initials, children: initials }) })
+          /* @__PURE__ */ jsx67("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx67("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ jsx67("div", { className: ScTableListMobile_default.initials, children: initials }) })
         ] }),
-        /* @__PURE__ */ jsxs57("div", { className: ScTableListMobile_default.detailsRow, children: [
-          /* @__PURE__ */ jsx66("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ jsx66("p", { className: ScTableListMobile_default.roleText, children: role }) }),
-          /* @__PURE__ */ jsxs57("div", { className: ScTableListMobile_default.accessInfo, children: [
-            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ jsx66("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ jsx66("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
-            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ jsx66("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ jsx66("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
+        /* @__PURE__ */ jsxs58("div", { className: ScTableListMobile_default.detailsRow, children: [
+          /* @__PURE__ */ jsx67("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ jsx67("p", { className: ScTableListMobile_default.roleText, children: role }) }),
+          /* @__PURE__ */ jsxs58("div", { className: ScTableListMobile_default.accessInfo, children: [
+            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ jsx67("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ jsx67("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
+            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ jsx67("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ jsx67("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
           ] })
         ] })
       ]
@@ -4882,7 +5121,7 @@ var ScWorkspaceSwitchMobile_default = {
 };
 
 // src/SC-workspaceSwitch-Mobile/ScWorkspaceSwitchMobile.tsx
-import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
 var ScWorkspaceSwitchMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -4895,24 +5134,24 @@ var ScWorkspaceSwitchMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     "div",
     {
       className: ScWorkspaceSwitchMobile_default.scWorkspaceSwitchMobile + " " + ScWorkspaceSwitchMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
-            /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ jsx67("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
-            /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
+        /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ jsx68("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
           ] }),
-          /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
+          /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
         ] }),
-        /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSwitchMobile_default.divider }),
-        /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
-          /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ jsx67("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
-          /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
+        /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSwitchMobile_default.divider }),
+        /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
+          /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ jsx68("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
+          /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
         ] })
       ]
     }
@@ -4939,7 +5178,7 @@ var ScWorkspaceSettingsMobile_default = {
 };
 
 // src/SC-workspaceSettings-Mobile/ScWorkspaceSettingsMobile.tsx
-import { jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
 var ScWorkspaceSettingsMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -4954,28 +5193,28 @@ var ScWorkspaceSettingsMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs60(
     "div",
     {
       className: ScWorkspaceSettingsMobile_default.scWorkspaceSettingsMobile + " " + ScWorkspaceSettingsMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
-            /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ jsx68("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
-            /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
+        /* @__PURE__ */ jsxs60("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ jsxs60("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ jsx69("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ jsx69("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ jsx69("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
           ] }),
-          /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
+          /* @__PURE__ */ jsx69("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ jsx69("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
         ] }),
-        /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSettingsMobile_default.divider }),
-        /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
-          /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ jsx68("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
-          /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
+        /* @__PURE__ */ jsx69("div", { className: ScWorkspaceSettingsMobile_default.divider }),
+        /* @__PURE__ */ jsxs60("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ jsx69("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ jsx69("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
+          /* @__PURE__ */ jsx69("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
         ] }),
-        /* @__PURE__ */ jsxs59("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
-          /* @__PURE__ */ jsx68("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ jsx68("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
-          /* @__PURE__ */ jsx68("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
+        /* @__PURE__ */ jsxs60("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ jsx69("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ jsx69("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
+          /* @__PURE__ */ jsx69("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
         ] })
       ]
     }
@@ -4998,7 +5237,7 @@ var ScMobileTopNav_default = {
 };
 
 // src/SC-MobileTopNav/ScMobileTopNav.tsx
-import { Fragment as Fragment20, jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx70, jsxs as jsxs61 } from "react/jsx-runtime";
 var ScMobileTopNav = ({
   type = "home",
   searchIcon = false,
@@ -5021,22 +5260,22 @@ var ScMobileTopNav = ({
 }) => {
   const hasBorder = type === "chat" || type === "inApp";
   const showSearch = type === "inApp" && searchIcon && search;
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       className: ScMobileTopNav_default.scMobileTopNav + " " + (hasBorder ? ScMobileTopNav_default.withBorder : "") + " " + className,
       ...props,
       children: [
-        type === "home" && /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-        type === "chat" && /* @__PURE__ */ jsxs60(Fragment20, { children: [
-          /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-          /* @__PURE__ */ jsx69("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
-          /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+        type === "home" && /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+        type === "chat" && /* @__PURE__ */ jsxs61(Fragment20, { children: [
+          /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ jsx70("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
+          /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        showSearch && /* @__PURE__ */ jsxs60(Fragment20, { children: [
-          /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ jsxs60("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
-            /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-            /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ jsx69(
+        showSearch && /* @__PURE__ */ jsxs61(Fragment20, { children: [
+          /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ jsxs61("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
+            /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+            /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ jsx70(
               "input",
               {
                 type: "text",
@@ -5047,17 +5286,17 @@ var ScMobileTopNav = ({
               }
             ) })
           ] }) }),
-          /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+          /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        type === "inApp" && !search && /* @__PURE__ */ jsxs60(Fragment20, { children: [
-          /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-          /* @__PURE__ */ jsx69("p", { className: ScMobileTopNav_default.heading, children: heading }),
-          /* @__PURE__ */ jsx69(
+        type === "inApp" && !search && /* @__PURE__ */ jsxs61(Fragment20, { children: [
+          /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ jsx70("p", { className: ScMobileTopNav_default.heading, children: heading }),
+          /* @__PURE__ */ jsx70(
             "div",
             {
               className: ScMobileTopNav_default.iconContainer + " " + (!searchIcon ? ScMobileTopNav_default.hidden : ""),
               onClick: onSearchClick,
-              children: searchIcon ? searchIconElement || /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ jsx69("div", { className: ScMobileTopNav_default.iconPlaceholder })
+              children: searchIcon ? searchIconElement || /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ jsx70("div", { className: ScMobileTopNav_default.iconPlaceholder })
             }
           )
         ] })
@@ -5078,7 +5317,7 @@ var ScMobileBottomAction_default = {
 };
 
 // src/SC-MobileBottomAction/ScMobileBottomAction.tsx
-import { jsx as jsx70, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs62 } from "react/jsx-runtime";
 var ScMobileBottomAction = ({
   text = "Save Changes",
   disabled = false,
@@ -5090,28 +5329,28 @@ var ScMobileBottomAction = ({
   ...props
 }) => {
   const isTwoButton = !!secondaryText;
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs62(
     "div",
     {
       className: ScMobileBottomAction_default.scMobileBottomAction + (isTwoButton ? " " + ScMobileBottomAction_default.twoButton : "") + " " + className,
       ...props,
       children: [
-        isTwoButton && /* @__PURE__ */ jsx70(
+        isTwoButton && /* @__PURE__ */ jsx71(
           "button",
           {
             className: ScMobileBottomAction_default.outlineButton + " " + (secondaryDisabled ? ScMobileBottomAction_default.disabled : ""),
             onClick: onSecondaryClick,
             disabled: secondaryDisabled,
-            children: /* @__PURE__ */ jsx70("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
+            children: /* @__PURE__ */ jsx71("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
           }
         ),
-        /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx71(
           "button",
           {
             className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
             onClick,
             disabled,
-            children: /* @__PURE__ */ jsx70("span", { className: ScMobileBottomAction_default.buttonText, children: text })
+            children: /* @__PURE__ */ jsx71("span", { className: ScMobileBottomAction_default.buttonText, children: text })
           }
         )
       ]
@@ -5129,7 +5368,7 @@ var ScPopUpMenu_default = {
 };
 
 // src/SC-PopUpMenu/ScPopUpMenu.tsx
-import { jsx as jsx71, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
 var ScPopUpMenu = ({
   menu = "Options",
   state = "default",
@@ -5138,15 +5377,15 @@ var ScPopUpMenu = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs63(
     "div",
     {
       className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
       onClick,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx71("span", { className: ScPopUpMenu_default.icon, children: icon }),
-        /* @__PURE__ */ jsx71("p", { className: ScPopUpMenu_default.menuText, children: menu })
+        icon && /* @__PURE__ */ jsx72("span", { className: ScPopUpMenu_default.icon, children: icon }),
+        /* @__PURE__ */ jsx72("p", { className: ScPopUpMenu_default.menuText, children: menu })
       ]
     }
   );
@@ -5172,7 +5411,7 @@ var ScReferralCardMobile_default = {
 };
 
 // src/SC-referralCard-Mobile/ScReferralCardMobile.tsx
-import { jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs64 } from "react/jsx-runtime";
 var ScReferralCardMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -5185,27 +5424,27 @@ var ScReferralCardMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
       className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs63("div", { className: ScReferralCardMobile_default.userRow, children: [
-          /* @__PURE__ */ jsxs63("div", { className: ScReferralCardMobile_default.profileSection, children: [
-            /* @__PURE__ */ jsx72("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx72("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ jsx72("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
-            /* @__PURE__ */ jsxs63("div", { className: ScReferralCardMobile_default.userInfo, children: [
-              /* @__PURE__ */ jsx72("p", { className: ScReferralCardMobile_default.userName, children: name }),
-              /* @__PURE__ */ jsx72("p", { className: ScReferralCardMobile_default.userEmail, children: email })
+        /* @__PURE__ */ jsxs64("div", { className: ScReferralCardMobile_default.userRow, children: [
+          /* @__PURE__ */ jsxs64("div", { className: ScReferralCardMobile_default.profileSection, children: [
+            /* @__PURE__ */ jsx73("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx73("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ jsx73("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
+            /* @__PURE__ */ jsxs64("div", { className: ScReferralCardMobile_default.userInfo, children: [
+              /* @__PURE__ */ jsx73("p", { className: ScReferralCardMobile_default.userName, children: name }),
+              /* @__PURE__ */ jsx73("p", { className: ScReferralCardMobile_default.userEmail, children: email })
             ] })
           ] }),
-          /* @__PURE__ */ jsx72("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ jsx72("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
+          /* @__PURE__ */ jsx73("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ jsx73("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
         ] }),
-        /* @__PURE__ */ jsx72("div", { className: ScReferralCardMobile_default.divider }),
-        /* @__PURE__ */ jsxs63("div", { className: ScReferralCardMobile_default.detailsRow, children: [
-          /* @__PURE__ */ jsx72("p", { className: ScReferralCardMobile_default.dateText, children: date }),
-          /* @__PURE__ */ jsx72("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
+        /* @__PURE__ */ jsx73("div", { className: ScReferralCardMobile_default.divider }),
+        /* @__PURE__ */ jsxs64("div", { className: ScReferralCardMobile_default.detailsRow, children: [
+          /* @__PURE__ */ jsx73("p", { className: ScReferralCardMobile_default.dateText, children: date }),
+          /* @__PURE__ */ jsx73("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
         ] })
       ]
     }
@@ -5222,19 +5461,19 @@ var InvoiceHistoryMobile_default = {
 };
 
 // src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.tsx
-import { jsx as jsx73, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs65 } from "react/jsx-runtime";
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
   amount = "$320.89",
   className
 }) => {
-  return /* @__PURE__ */ jsxs64("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ jsxs64("div", { className: InvoiceHistoryMobile_default.info, children: [
-      /* @__PURE__ */ jsx73("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
-      /* @__PURE__ */ jsx73("div", { className: InvoiceHistoryMobile_default.date, children: date })
+  return /* @__PURE__ */ jsxs65("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsxs65("div", { className: InvoiceHistoryMobile_default.info, children: [
+      /* @__PURE__ */ jsx74("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
+      /* @__PURE__ */ jsx74("div", { className: InvoiceHistoryMobile_default.date, children: date })
     ] }),
-    /* @__PURE__ */ jsx73("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
+    /* @__PURE__ */ jsx74("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
   ] });
 };
 
@@ -5252,7 +5491,7 @@ var UsageHistoryMobile_default = {
 };
 
 // src/SC-UsageHistoryMobile/UsageHistoryMobile.tsx
-import { jsx as jsx74, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs66 } from "react/jsx-runtime";
 var UsageHistoryMobile = ({
   serviceName = "Artifax Generation",
   credits = "50",
@@ -5261,18 +5500,18 @@ var UsageHistoryMobile = ({
   balance = "84,902",
   className
 }) => {
-  return /* @__PURE__ */ jsxs65("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ jsxs65("div", { className: UsageHistoryMobile_default.row1, children: [
-      /* @__PURE__ */ jsx74("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
-      /* @__PURE__ */ jsx74("span", { className: UsageHistoryMobile_default.credits, children: credits })
+  return /* @__PURE__ */ jsxs66("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsxs66("div", { className: UsageHistoryMobile_default.row1, children: [
+      /* @__PURE__ */ jsx75("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
+      /* @__PURE__ */ jsx75("span", { className: UsageHistoryMobile_default.credits, children: credits })
     ] }),
-    /* @__PURE__ */ jsxs65("div", { className: UsageHistoryMobile_default.row2, children: [
-      /* @__PURE__ */ jsxs65("div", { className: UsageHistoryMobile_default.metaLeft, children: [
-        /* @__PURE__ */ jsx74("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
-        /* @__PURE__ */ jsx74("div", { className: UsageHistoryMobile_default.divider }),
-        /* @__PURE__ */ jsx74("span", { className: UsageHistoryMobile_default.metaText, children: date })
+    /* @__PURE__ */ jsxs66("div", { className: UsageHistoryMobile_default.row2, children: [
+      /* @__PURE__ */ jsxs66("div", { className: UsageHistoryMobile_default.metaLeft, children: [
+        /* @__PURE__ */ jsx75("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
+        /* @__PURE__ */ jsx75("div", { className: UsageHistoryMobile_default.divider }),
+        /* @__PURE__ */ jsx75("span", { className: UsageHistoryMobile_default.metaText, children: date })
       ] }),
-      /* @__PURE__ */ jsx74("span", { className: UsageHistoryMobile_default.balance, children: balance })
+      /* @__PURE__ */ jsx75("span", { className: UsageHistoryMobile_default.balance, children: balance })
     ] })
   ] });
 };
@@ -5296,7 +5535,7 @@ var ScWorkspaceSwitchMobileV2_default = {
 };
 
 // src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.tsx
-import { jsx as jsx75, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs67 } from "react/jsx-runtime";
 var ScWorkspaceSwitchMobileV2 = ({
   wsName = "Workspace name is kepler",
   initials = "WS",
@@ -5309,14 +5548,14 @@ var ScWorkspaceSwitchMobileV2 = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
       onClick,
       ...props,
-      children: /* @__PURE__ */ jsxs66("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
-        /* @__PURE__ */ jsx75("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsxs67("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
+        /* @__PURE__ */ jsx76("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ jsx76(
           ScDp,
           {
             type: imageUrl ? "image" : "initial",
@@ -5330,14 +5569,14 @@ var ScWorkspaceSwitchMobileV2 = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs66("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
-          /* @__PURE__ */ jsx75("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
-          /* @__PURE__ */ jsxs66("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
-            /* @__PURE__ */ jsx75("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
-            /* @__PURE__ */ jsx75("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
-            /* @__PURE__ */ jsx75("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
-            /* @__PURE__ */ jsx75("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
-            /* @__PURE__ */ jsx75("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
+        /* @__PURE__ */ jsxs67("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
+          /* @__PURE__ */ jsx76("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
+          /* @__PURE__ */ jsxs67("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
+            /* @__PURE__ */ jsx76("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
+            /* @__PURE__ */ jsx76("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ jsx76("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
+            /* @__PURE__ */ jsx76("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ jsx76("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
           ] })
         ] })
       ] })
@@ -5364,7 +5603,7 @@ var ScImageField_default = {
 
 // src/SC-imageField/ScImageField.tsx
 import { SiconUpload as SiconUpload2, SiconDelete as SiconDelete2 } from "@streamoid/icons";
-import { jsx as jsx76, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs68 } from "react/jsx-runtime";
 var ScImageField = ({
   label = "Label",
   imagePreview,
@@ -5387,8 +5626,8 @@ var ScImageField = ({
     }
     e.target.value = "";
   }
-  return /* @__PURE__ */ jsxs67("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
-    /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs68("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsx77(
       "input",
       {
         ref: inputRef,
@@ -5398,9 +5637,9 @@ var ScImageField = ({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx76("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ jsx76("div", { className: ScImageField_default.label, children: label }) }),
-    hasImage ? /* @__PURE__ */ jsxs67("div", { className: ScImageField_default.previewArea, children: [
-      /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx77("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ jsx77("div", { className: ScImageField_default.label, children: label }) }),
+    hasImage ? /* @__PURE__ */ jsxs68("div", { className: ScImageField_default.previewArea, children: [
+      /* @__PURE__ */ jsx77(
         "img",
         {
           className: ScImageField_default.previewImage,
@@ -5408,8 +5647,8 @@ var ScImageField = ({
           alt: "preview"
         }
       ),
-      /* @__PURE__ */ jsx76("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
-      /* @__PURE__ */ jsx76(
+      /* @__PURE__ */ jsx77("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
+      /* @__PURE__ */ jsx77(
         SiconDelete2,
         {
           className: ScImageField_default.removeIcon,
@@ -5420,9 +5659,9 @@ var ScImageField = ({
           }
         }
       )
-    ] }) : /* @__PURE__ */ jsxs67("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
-      /* @__PURE__ */ jsx76(SiconUpload2, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
-      /* @__PURE__ */ jsx76("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
+    ] }) : /* @__PURE__ */ jsxs68("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
+      /* @__PURE__ */ jsx77(SiconUpload2, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
+      /* @__PURE__ */ jsx77("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
     ] })
   ] });
 };
@@ -5436,7 +5675,7 @@ var ScSettingsTabComp_default = {
 };
 
 // src/SC-settingsTabComp/ScSettingsTabComp.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var ScSettingsTabComp = ({
   tabName = "Tab",
   active = false,
@@ -5444,12 +5683,12 @@ var ScSettingsTabComp = ({
   className
 }) => {
   const variantsClassName = ScSettingsTabComp_default["active-" + active];
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       className: ScSettingsTabComp_default.scSettingsTabComp + " " + variantsClassName + " " + (className ?? ""),
       onClick,
-      children: /* @__PURE__ */ jsx77("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
+      children: /* @__PURE__ */ jsx78("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
     }
   );
 };
@@ -5469,7 +5708,7 @@ var ScCreditsUsageCardMobile_default = {
 
 // src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.tsx
 import { SiconCredits as SiconCredits3 } from "@streamoid/icons";
-import { jsx as jsx78, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs69 } from "react/jsx-runtime";
 var ScCreditsUsageCardMobile = ({
   usageLabel = "Credits usage",
   usageText = "8,450 / 30,000",
@@ -5479,23 +5718,23 @@ var ScCreditsUsageCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs68("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ jsxs68("div", { className: ScCreditsUsageCardMobile_default.header, children: [
-      /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsxs69("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ jsxs69("div", { className: ScCreditsUsageCardMobile_default.header, children: [
+      /* @__PURE__ */ jsx79(
         SiconCredits3,
         {
           className: ScCreditsUsageCardMobile_default.headerIcon,
           color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
         }
       ),
-      /* @__PURE__ */ jsx78("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
+      /* @__PURE__ */ jsx79("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
     ] }),
-    /* @__PURE__ */ jsx78("div", { className: ScCreditsUsageCardMobile_default.divider }),
-    /* @__PURE__ */ jsxs68("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
-      /* @__PURE__ */ jsx78("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
-      /* @__PURE__ */ jsx78("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
+    /* @__PURE__ */ jsx79("div", { className: ScCreditsUsageCardMobile_default.divider }),
+    /* @__PURE__ */ jsxs69("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
+      /* @__PURE__ */ jsx79("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
+      /* @__PURE__ */ jsx79("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
     ] }),
-    /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsx79(
       ScButton,
       {
         text: buyButtonText,
@@ -5527,7 +5766,7 @@ var ScPlanDetailsCardMobile_default = {
 
 // src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.tsx
 import { SiconBilling as SiconBilling4 } from "@streamoid/icons";
-import { jsx as jsx79, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs70 } from "react/jsx-runtime";
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
@@ -5539,19 +5778,19 @@ var ScPlanDetailsCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs69("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ jsxs69("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
-      /* @__PURE__ */ jsxs69("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
-        /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsxs70("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ jsxs70("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
+      /* @__PURE__ */ jsxs70("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
+        /* @__PURE__ */ jsx80(
           SiconBilling4,
           {
             className: ScPlanDetailsCardMobile_default.headerIcon,
             color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
           }
         ),
-        /* @__PURE__ */ jsx79("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
+        /* @__PURE__ */ jsx80("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
       ] }),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         ScBadges,
         {
           text: badgeText,
@@ -5561,16 +5800,16 @@ var ScPlanDetailsCardMobile = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx79("div", { className: ScPlanDetailsCardMobile_default.divider }),
-    /* @__PURE__ */ jsxs69("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
-      /* @__PURE__ */ jsxs69("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
-        /* @__PURE__ */ jsx79("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
-        /* @__PURE__ */ jsx79("div", { className: ScPlanDetailsCardMobile_default.dot }),
-        /* @__PURE__ */ jsx79("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
+    /* @__PURE__ */ jsx80("div", { className: ScPlanDetailsCardMobile_default.divider }),
+    /* @__PURE__ */ jsxs70("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
+      /* @__PURE__ */ jsxs70("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
+        /* @__PURE__ */ jsx80("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
+        /* @__PURE__ */ jsx80("div", { className: ScPlanDetailsCardMobile_default.dot }),
+        /* @__PURE__ */ jsx80("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
       ] }),
-      /* @__PURE__ */ jsx79("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
+      /* @__PURE__ */ jsx80("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
     ] }),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       ScButton,
       {
         text: upgradeButtonText,
@@ -5584,6 +5823,7 @@ var ScPlanDetailsCardMobile = ({
   ] });
 };
 export {
+  CreditWarningBanner,
   InvoiceHistoryMobile,
   NscWorkspaceSwitch,
   ScAccess,