@streamoid/ui 0.2.5 → 0.2.7

package/dist/index.mjs

@@ -311,69 +311,80 @@ var ScCheckbox_default = {
 };
 
 // src/SC-checkbox/ScCheckbox.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ScCheckbox = ({
   state = "default",
+  checked,
+  onChange,
   className,
   ...props
 }) => {
-  const variantsClassName = ScCheckbox_default["state-" + state];
+  const effectiveState = checked !== void 0 ? checked ? "selected" : "default" : state;
+  const variantsClassName = ScCheckbox_default["state-" + effectiveState];
   return /* @__PURE__ */ jsx6(
     "div",
     {
       className: ScCheckbox_default.scCheckbox + " " + className + " " + variantsClassName,
+      style: { cursor: "pointer", ...props.style },
       ...props,
-      children: /* @__PURE__ */ jsx6(
-        "svg",
-        {
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx6(
-            "path",
-            {
-              d: "M17.5996 22.5V24H6.40039V22.5H17.5996ZM22.5 17.5996V6.40039C22.5 5.25553 22.4985 4.48629 22.4502 3.89453C22.4033 3.32077 22.3198 3.04631 22.2275 2.86523C21.9879 2.39483 21.6052 2.01214 21.1348 1.77246C20.9537 1.68023 20.6792 1.59671 20.1055 1.5498C19.5137 1.50146 18.7445 1.5 17.5996 1.5H6.40039C5.25553 1.5 4.48629 1.50146 3.89453 1.5498C3.32077 1.59671 3.04631 1.68023 2.86523 1.77246C2.39483 2.01214 2.01214 2.39483 1.77246 2.86523C1.68023 3.04631 1.59671 3.32077 1.5498 3.89453C1.50146 4.48629 1.5 5.25553 1.5 6.40039V17.5996C1.5 18.7445 1.50146 19.5137 1.5498 20.1055C1.59671 20.6792 1.68023 20.9537 1.77246 21.1348C2.01214 21.6052 2.39483 21.9879 2.86523 22.2275C3.04631 22.3198 3.32077 22.4033 3.89453 22.4502C4.48629 22.4985 5.25553 22.5 6.40039 22.5V24L4.91602 23.9932C3.72431 23.9744 2.96088 23.9041 2.34766 23.6406L2.18359 23.5645C1.52512 23.2289 0.974134 22.7183 0.589844 22.0918L0.435547 21.8164C-0.000427067 20.9608 1.63278e-09 19.8398 1.63278e-09 17.5996V6.40039C1.63278e-09 4.16018 -0.000427067 3.03924 0.435547 2.18359C0.819016 1.43109 1.43109 0.819016 2.18359 0.435547C2.82525 0.108606 3.61607 0.0272847 4.91602 0.00683594L6.40039 1.63278e-09H17.5996C19.8398 1.63278e-09 20.9608 -0.000427067 21.8164 0.435547C22.5689 0.819016 23.181 1.43109 23.5645 2.18359C24.0004 3.03924 24 4.16018 24 6.40039V17.5996C24 19.8398 24.0004 20.9608 23.5645 21.8164L23.4102 22.0918C23.0259 22.7183 22.4749 23.2289 21.8164 23.5645L21.6523 23.6406C20.816 23.9999 19.6999 24 17.5996 24V22.5C18.7445 22.5 19.5137 22.4985 20.1055 22.4502C20.6792 22.4033 20.9537 22.3198 21.1348 22.2275C21.6052 21.9879 21.9879 21.6052 22.2275 21.1348C22.3198 20.9537 22.4033 20.6792 22.4502 20.1055C22.4985 19.5137 22.5 18.7445 22.5 17.5996Z",
-              fill: "var(--alias-text-and-icons-muted, #7a7a7a)"
-            }
-          )
-        }
-      )
+      onClick: (e) => {
+        onChange?.(
+          checked !== void 0 ? !checked : effectiveState !== "selected"
+        );
+        props.onClick?.(e);
+      },
+      children: effectiveState === "selected" ? /* @__PURE__ */ jsxs6("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx6("rect", { width: "24", height: "24", rx: "6", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+        /* @__PURE__ */ jsx6("path", { d: "M7.5 12L10.5 15L16.5 9", stroke: "var(--alias-text---icons-inverse, #101010)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] }) : /* @__PURE__ */ jsx6("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx6("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "5.25", stroke: "var(--alias-border-default, #3e3e3e)", strokeWidth: "1.5" }) })
     }
   );
 };
 
 // src/SC-Pairtext/ScPairtext.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ScPairtext = ({
   content = "Pairtext",
   icon = /* @__PURE__ */ jsx7(SiconHome, { className: ScPairtext_default.siconHomeInstance }),
   iconPosition = "left",
   type = "icon",
+  checked,
+  onChange,
   className,
   ...props
 }) => {
   const variantsClassName = ScPairtext_default["icon-position-" + iconPosition] + " " + ScPairtext_default["type-" + type];
-  return /* @__PURE__ */ jsxs6(
+  const derivedState = checked !== void 0 ? checked ? "selected" : "default" : "default";
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: ScPairtext_default.scPairtext + " " + className + " " + variantsClassName,
+      style: { cursor: "pointer" },
+      onClick: (e) => {
+        onChange?.(!checked);
+      },
       children: [
-        iconPosition === "right" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsxs6("div", { className: ScPairtext_default.content, children: [
+        iconPosition === "right" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsxs7("div", { className: ScPairtext_default.content, children: [
           content,
           " "
         ] }) }),
         type === "checkbox" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsx7(
           ScCheckbox,
           {
-            state: "default",
+            state: derivedState,
+            checked,
             className: ScPairtext_default.scCheckboxInstance
           }
         ) }),
-        type === "radio" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsx7(ScRadio, { state: "default", className: ScPairtext_default.scRadioInstance }) }),
+        type === "radio" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsx7(
+          ScRadio,
+          {
+            state: derivedState,
+            className: ScPairtext_default.scRadioInstance
+          }
+        ) }),
         type === "icon" && /* @__PURE__ */ jsx7(Fragment2, { children: icon }),
-        iconPosition === "left" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsxs6("div", { className: ScPairtext_default.content, children: [
+        iconPosition === "left" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsxs7("div", { className: ScPairtext_default.content, children: [
           content,
           " "
         ] }) })
@@ -383,7 +394,7 @@ var ScPairtext = ({
 };
 
 // src/SC-BillingHistoryTableList/ScBillingHistoryTableList.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ScBillingHistoryTableList = ({
   invoiceNumber = "# INV-2800-2026",
   amount = "$320.89",
@@ -393,22 +404,22 @@ var ScBillingHistoryTableList = ({
   onRowClick,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: ScBillingHistoryTableList_default.scBillingHistoryTableList + " " + className,
       onClick: onRowClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs7("div", { className: ScBillingHistoryTableList_default.invoiceNumber, children: [
+        /* @__PURE__ */ jsxs8("div", { className: ScBillingHistoryTableList_default.invoiceNumber, children: [
           invoiceNumber,
           " "
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: ScBillingHistoryTableList_default.amount, children: [
+        /* @__PURE__ */ jsxs8("div", { className: ScBillingHistoryTableList_default.amount, children: [
           amount,
           " "
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: ScBillingHistoryTableList_default.date, children: [
+        /* @__PURE__ */ jsxs8("div", { className: ScBillingHistoryTableList_default.date, children: [
           date,
           " "
         ] }),
@@ -456,7 +467,7 @@ var ScButton_default = {
 // src/SC-Button/ScButton.tsx
 import { SiconHome as SiconHome2 } from "@streamoid/icons";
 import { useMemo, isValidElement, cloneElement } from "react";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 if (typeof window !== "undefined" && CSS.registerProperty) {
   const props = [
     { name: "--x-0", val: "72%" },
@@ -537,7 +548,7 @@ var ScButton = ({
   const strokeWidth = size === "sm" ? 1.25 : 1.5;
   const styledIcon = isValidElement(icon) ? cloneElement(icon, { color: "currentColor", strokeWidth }) : icon;
   const variantsClassName = ScButton_default["style-variant-" + styleVariant] + " " + ScButton_default["state-" + state] + " " + ScButton_default["variant-" + variant] + " " + ScButton_default["type-" + type] + " " + ScButton_default["size-" + size];
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: ScButton_default.scButton + " " + className + " " + variantsClassName,
@@ -550,9 +561,9 @@ var ScButton = ({
             style: { backgroundImage: `url(${noiseUrl})` }
           }
         ),
-        /* @__PURE__ */ jsxs8("div", { className: ScButton_default.container, children: [
+        /* @__PURE__ */ jsxs9("div", { className: ScButton_default.container, children: [
           (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ jsx9(Fragment3, { children: styledIcon }),
-          (styleVariant === "default" || styleVariant === "icon-right" || styleVariant === "icon-left") && /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsxs8("div", { className: ScButton_default.label, children: [
+          (styleVariant === "default" || styleVariant === "icon-right" || styleVariant === "icon-left") && /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsxs9("div", { className: ScButton_default.label, children: [
             text,
             " "
           ] }) }),
@@ -644,7 +655,7 @@ var ScCalendarDateComps_default = {
 };
 
 // src/SC-Calendar date comps/ScCalendarDateComps.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var ScCalendarDateComps = ({
   date = "31",
   state = "default",
@@ -657,7 +668,7 @@ var ScCalendarDateComps = ({
     {
       className: ScCalendarDateComps_default.scCalendarDateComps + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs9("div", { className: ScCalendarDateComps_default.date, children: [
+      children: /* @__PURE__ */ jsxs10("div", { className: ScCalendarDateComps_default.date, children: [
         date,
         " "
       ] })
@@ -666,7 +677,7 @@ var ScCalendarDateComps = ({
 };
 
 // src/SC-Calendar/ScCalendar.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var MONTH_NAMES = [
   "January",
   "February",
@@ -729,14 +740,14 @@ var ScCalendar = ({
     }
     return String(dayIndex - firstDayOfMonth + 1);
   };
-  return /* @__PURE__ */ jsxs10("div", { className: ScCalendar_default.scCalendar + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs10("div", { className: ScCalendar_default.header, children: [
-      /* @__PURE__ */ jsxs10("div", { className: ScCalendar_default.monthYear, children: [
+  return /* @__PURE__ */ jsxs11("div", { className: ScCalendar_default.scCalendar + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs11("div", { className: ScCalendar_default.header, children: [
+      /* @__PURE__ */ jsxs11("div", { className: ScCalendar_default.monthYear, children: [
         MONTH_NAMES[currentMonth],
         " ",
         currentYear
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: ScCalendar_default.navigation, children: [
+      /* @__PURE__ */ jsxs11("div", { className: ScCalendar_default.navigation, children: [
         /* @__PURE__ */ jsx12(
           SiconLeft,
           {
@@ -822,7 +833,7 @@ var ScProgressBar = ({
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
 import { SiconHome as SiconHome3 } from "@streamoid/icons";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var ScCreditsUsageCard = ({
   usageLabel = "Credits usage",
   usageText = "8,450 / 30,000",
@@ -837,8 +848,8 @@ var ScCreditsUsageCard = ({
 }) => {
   const [btnHovered, setBtnHovered] = useState(false);
   const displayText = btnHovered && buyButtonHoverText ? buyButtonHoverText : buyButtonText;
-  return /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.header, children: [
+  return /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.header, children: [
       /* @__PURE__ */ jsx14(
         ScPairtext,
         {
@@ -847,13 +858,13 @@ var ScCreditsUsageCard = ({
           className: ScCreditsUsageCard_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.usageText, children: [
+      /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.usageText, children: [
         usageText,
         " "
       ] })
     ] }),
     /* @__PURE__ */ jsx14(ScHDivider, { className: ScCreditsUsageCard_default.scHDividerInstance }),
-    /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.progressContainer, children: [
+    /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.progressContainer, children: [
       /* @__PURE__ */ jsx14(
         ScProgressBar,
         {
@@ -861,7 +872,7 @@ var ScCreditsUsageCard = ({
           className: ScCreditsUsageCard_default.scProgressBarInstance
         }
       ),
-      /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.remainingText, children: [
+      /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.remainingText, children: [
         remainingText,
         " "
       ] }),
@@ -949,7 +960,7 @@ var ScGoogleSignIn_default = {
 };
 
 // src/SC-Google sign in/ScGoogleSignIn.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var ScGoogleSignIn = ({
   hover = "false",
   googleLogoSrc = "google-logo0.png",
@@ -958,14 +969,14 @@ var ScGoogleSignIn = ({
   ...props
 }) => {
   const variantsClassName = ScGoogleSignIn_default["hover-" + hover];
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: ScGoogleSignIn_default.scGoogleSignIn + " " + className + " " + variantsClassName,
       ...props,
       children: [
         /* @__PURE__ */ jsx16("img", { className: ScGoogleSignIn_default.googleLogo, src: googleLogoSrc }),
-        /* @__PURE__ */ jsxs12("div", { className: ScGoogleSignIn_default.signInText, children: [
+        /* @__PURE__ */ jsxs13("div", { className: ScGoogleSignIn_default.signInText, children: [
           signInText,
           " "
         ] })
@@ -981,7 +992,7 @@ var ScIntialProfileCover_default = {
 };
 
 // src/SC-Intial Profile Cover/ScIntialProfileCover.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var ScIntialProfileCover = ({
   intial = "WS",
   size,
@@ -993,7 +1004,7 @@ var ScIntialProfileCover = ({
     {
       className: ScIntialProfileCover_default.scIntialProfileCover + " " + className,
       style: sizeStyle,
-      children: /* @__PURE__ */ jsxs13("div", { className: ScIntialProfileCover_default.initials, children: [
+      children: /* @__PURE__ */ jsxs14("div", { className: ScIntialProfileCover_default.initials, children: [
         intial,
         " "
       ] })
@@ -1017,14 +1028,14 @@ var ScStrLogo_default = {
 };
 
 // src/SC-strLogo/ScStrLogo.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var ScStrLogo = ({
   type = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScStrLogo_default["type-" + type];
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "svg",
     {
       className: ScStrLogo_default.scStrLogo + " " + className + " " + variantsClassName,
@@ -1126,7 +1137,7 @@ var ScStrLogo = ({
             fill: "var(--alias-text-and-icons-primary, #f5f5f5)"
           }
         ),
-        /* @__PURE__ */ jsx18("defs", { children: /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsx18("defs", { children: /* @__PURE__ */ jsxs15(
           "linearGradient",
           {
             id: "paint0_linear_19_1153",
@@ -1183,7 +1194,7 @@ var ScMenuOptions_default = {
 
 // src/SC-Menu options/ScMenuOptions.tsx
 import { SiconTeam } from "@streamoid/icons";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var ScMenuOptions = ({
   icon = /* @__PURE__ */ jsx20(SiconTeam, { className: ScMenuOptions_default.siconTeamInstance }),
   version = "v2.0.21",
@@ -1194,18 +1205,18 @@ var ScMenuOptions = ({
   ...props
 }) => {
   const variantsClassName = ScMenuOptions_default["hover-" + hover] + " " + ScMenuOptions_default["variant-" + variant];
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: ScMenuOptions_default.scMenuOptions + " " + className + " " + variantsClassName,
       ...props,
       children: [
         icon,
-        /* @__PURE__ */ jsxs15("div", { className: ScMenuOptions_default.content, children: [
+        /* @__PURE__ */ jsxs16("div", { className: ScMenuOptions_default.content, children: [
           text,
           " "
         ] }),
-        variant === "with-v" && /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsxs15("div", { className: ScMenuOptions_default.content2, children: [
+        variant === "with-v" && /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsxs16("div", { className: ScMenuOptions_default.content2, children: [
           version,
           " "
         ] }) })
@@ -1271,7 +1282,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 jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var ScPlanCard = ({
   planName = "Pro",
   price = "$49.99 / month",
@@ -1291,17 +1302,17 @@ var ScPlanCard = ({
   const isCustom = type === "custom";
   const isFreeOrPopular = type === "free" || type === "popular";
   const variantsClassName = ScPlanCard_default["type-" + type];
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: ScPlanCard_default.scPlanCard + " " + (className || "") + " " + variantsClassName,
       children: [
-        /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.planHeader, children: /* @__PURE__ */ jsxs16("div", { className: ScPlanCard_default.planInfo, 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 })
         ] }) }),
-        isFreeOrPopular && /* @__PURE__ */ jsxs16("div", { className: ScPlanCard_default.creditsWrapper, children: [
-          /* @__PURE__ */ jsxs16(
+        isFreeOrPopular && /* @__PURE__ */ jsxs17("div", { className: ScPlanCard_default.creditsWrapper, children: [
+          /* @__PURE__ */ jsxs17(
             "div",
             {
               className: ScPlanCard_default.creditsContainer + (isPopular ? " " + ScPlanCard_default.creditsContainerPopular : ""),
@@ -1316,7 +1327,7 @@ var ScPlanCard = ({
                   }
                 ),
                 /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.creditsText, children: credits }),
-                isPopular && /* @__PURE__ */ jsxs16(
+                isPopular && /* @__PURE__ */ jsxs17(
                   "button",
                   {
                     type: "button",
@@ -1365,11 +1376,11 @@ var ScPlanCard = ({
         ),
         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__ */ jsxs16(Fragment5, { children: [
+        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ jsxs17(Fragment5, { children: [
           sIdx > 0 && /* @__PURE__ */ jsx22(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
-          /* @__PURE__ */ jsxs16("div", { className: ScPlanCard_default.featuresSection, children: [
+          /* @__PURE__ */ jsxs17("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
-            section.features.map((feature, fIdx) => /* @__PURE__ */ jsxs16("div", { className: ScPlanCard_default.featureRow, children: [
+            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 })
             ] }, fIdx))
@@ -1410,7 +1421,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 jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var ScPlanDetailsCard = ({
   planName = "Free",
   planCredits = "30,000 credits",
@@ -1422,8 +1433,8 @@ var ScPlanDetailsCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs17("div", { className: ScPlanDetailsCard_default.scPlanDetailsCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs17("div", { className: ScPlanDetailsCard_default.planHeader, children: [
+  return /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.scPlanDetailsCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs18("div", { className: ScPlanDetailsCard_default.planHeader, children: [
       /* @__PURE__ */ jsx23(
         ScPairtext,
         {
@@ -1443,9 +1454,9 @@ var ScPlanDetailsCard = ({
       )
     ] }),
     /* @__PURE__ */ jsx23(ScHDivider, { className: ScPlanDetailsCard_default.scHDividerInstance }),
-    /* @__PURE__ */ jsxs17("div", { className: ScPlanDetailsCard_default.planDetails, children: [
-      /* @__PURE__ */ jsxs17("div", { className: ScPlanDetailsCard_default.planInfo, children: [
-        /* @__PURE__ */ jsxs17("div", { className: ScPlanDetailsCard_default.planNameRow, children: [
+    /* @__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 })
@@ -1477,7 +1488,7 @@ var ScProfile_default = {
 };
 
 // src/SC-Profile/ScProfile.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var ScProfile = ({
   name = "Chris Hemsworth",
   subText = "Kepler workspace",
@@ -1487,19 +1498,19 @@ var ScProfile = ({
   ...props
 }) => {
   const variantsClassName = ScProfile_default["collapsed-" + collapsed];
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "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__ */ jsxs18("div", { className: ScProfile_default.userInfo, children: [
-          /* @__PURE__ */ jsxs18("div", { className: ScProfile_default.userName, children: [
+        collapsed === "false" && /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsxs19("div", { className: ScProfile_default.userInfo, children: [
+          /* @__PURE__ */ jsxs19("div", { className: ScProfile_default.userName, children: [
             name,
             " "
           ] }),
-          /* @__PURE__ */ jsxs18("div", { className: ScProfile_default.userDescription, children: [
+          /* @__PURE__ */ jsxs19("div", { className: ScProfile_default.userDescription, children: [
             subText,
             " "
           ] })
@@ -1509,6 +1520,9 @@ var ScProfile = ({
   );
 };
 
+// src/SC-Profile Image update/ScProfileImageUpdate.tsx
+import { useRef } from "react";
+
 // src/SC-Profile Image update/ScProfileImageUpdate.module.css
 var ScProfileImageUpdate_default = {
   scProfileImageUpdate: "ScProfileImageUpdate_scProfileImageUpdate",
@@ -1516,6 +1530,7 @@ var ScProfileImageUpdate_default = {
   buttonContainer: "ScProfileImageUpdate_buttonContainer",
   scButtonInstance: "ScProfileImageUpdate_scButtonInstance",
   scVDividerInstance: "ScProfileImageUpdate_scVDividerInstance",
+  profileInitials: "ScProfileImageUpdate_profileInitials",
   siconUploadInstance: "ScProfileImageUpdate_siconUploadInstance",
   siconDeleteInstance: "ScProfileImageUpdate_siconDeleteInstance"
 };
@@ -1555,34 +1570,64 @@ var ScVDivider = ({
 };
 
 // src/SC-Profile Image update/ScProfileImageUpdate.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var ScProfileImageUpdate = ({
+  imageUrl,
+  initials = "",
+  onUpload,
+  onDelete,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx26("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: /* @__PURE__ */ jsxs19("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
+  const inputRef = useRef(null);
+  function handleUploadClick() {
+    inputRef.current?.click();
+  }
+  function handleFileChange(e) {
+    const file = e.target.files?.[0];
+    if (file) {
+      onUpload?.(file);
+    }
+    e.target.value = "";
+  }
+  return /* @__PURE__ */ jsxs20("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: [
     /* @__PURE__ */ jsx26(
-      ScButton,
+      "input",
       {
-        icon: /* @__PURE__ */ jsx26(SiconUpload, { className: ScProfileImageUpdate_default.siconUploadInstance }),
-        styleVariant: "icon-only",
-        variant: "tertiary",
-        size: "md",
-        className: ScProfileImageUpdate_default.scButtonInstance
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: handleFileChange
       }
     ),
-    /* @__PURE__ */ jsx26(ScVDivider, { className: ScProfileImageUpdate_default.scVDividerInstance }),
-    /* @__PURE__ */ jsx26(
-      ScButton,
-      {
-        icon: /* @__PURE__ */ jsx26(SiconDelete, { className: ScProfileImageUpdate_default.siconDeleteInstance }),
-        styleVariant: "icon-only",
-        variant: "tertiary",
-        size: "md",
-        className: ScProfileImageUpdate_default.scButtonInstance
-      }
-    )
-  ] }) });
+    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(
+        ScButton,
+        {
+          icon: /* @__PURE__ */ jsx26(SiconUpload, { className: ScProfileImageUpdate_default.siconUploadInstance }),
+          styleVariant: "icon-only",
+          variant: "tertiary",
+          size: "md",
+          className: ScProfileImageUpdate_default.scButtonInstance,
+          onClick: handleUploadClick
+        }
+      ),
+      /* @__PURE__ */ jsx26(ScVDivider, { className: ScProfileImageUpdate_default.scVDividerInstance }),
+      /* @__PURE__ */ jsx26(
+        ScButton,
+        {
+          icon: /* @__PURE__ */ jsx26(SiconDelete, { className: ScProfileImageUpdate_default.siconDeleteInstance }),
+          styleVariant: "icon-only",
+          variant: "tertiary",
+          size: "md",
+          className: ScProfileImageUpdate_default.scButtonInstance,
+          onClick: () => onDelete?.()
+        }
+      )
+    ] })
+  ] });
 };
 
 // src/SC-Profile options/ScProfileOptions.module.css
@@ -1617,7 +1662,7 @@ var ScWorkspace_default = {
 };
 
 // src/SC-Workspace/ScWorkspace.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var ScWorkspace = ({
   collapsed = "false",
   workspaceName = "Kepler",
@@ -1627,19 +1672,19 @@ var ScWorkspace = ({
   ...props
 }) => {
   const variantsClassName = ScWorkspace_default["collapsed-" + collapsed];
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "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__ */ jsxs20("div", { className: ScWorkspace_default.userInfo, children: [
-          /* @__PURE__ */ jsxs20("div", { className: ScWorkspace_default.userName, children: [
+        collapsed === "false" && /* @__PURE__ */ jsx27(Fragment7, { children: /* @__PURE__ */ jsxs21("div", { className: ScWorkspace_default.userInfo, children: [
+          /* @__PURE__ */ jsxs21("div", { className: ScWorkspace_default.userName, children: [
             workspaceName,
             " "
           ] }),
-          /* @__PURE__ */ jsxs20("div", { className: ScWorkspace_default.userRole, children: [
+          /* @__PURE__ */ jsxs21("div", { className: ScWorkspace_default.userRole, children: [
             userRole,
             " "
           ] })
@@ -1668,7 +1713,7 @@ var ScTabComp_default = {
 
 // src/SC-tabComp/ScTabComp.tsx
 import { SiconHome as SiconHome6 } from "@streamoid/icons";
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var ScTabComp = ({
   icon = /* @__PURE__ */ jsx28(SiconHome6, { className: ScTabComp_default.siconHomeInstance }),
   active = "false",
@@ -1678,14 +1723,14 @@ var ScTabComp = ({
   ...props
 }) => {
   const variantsClassName = ScTabComp_default["active-" + active] + " " + ScTabComp_default["type-" + type];
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "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__ */ jsxs21("div", { className: ScTabComp_default.tabText, children: [
+        type === "text-only" && /* @__PURE__ */ jsx28(Fragment8, { children: /* @__PURE__ */ jsx28("div", { className: ScTabComp_default.textContainer, children: /* @__PURE__ */ jsxs22("div", { className: ScTabComp_default.tabText, children: [
           text,
           " "
         ] }) }) })
@@ -1706,7 +1751,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 jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var ScTabSwitcher = ({
   tabCount = "2",
   component,
@@ -1718,7 +1763,7 @@ var ScTabSwitcher = ({
   ...props
 }) => {
   const variantsClassName = ScTabSwitcher_default["tab-count-" + tabCount];
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: ScTabSwitcher_default.scTabSwitcher + " " + className + " " + variantsClassName,
@@ -1766,16 +1811,16 @@ var ScTabSwitcher = ({
 };
 
 // src/SC-Profile options/ScProfileOptions.tsx
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var ScProfileOptions = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs23("div", { className: ScProfileOptions_default.scProfileOptions + " " + className, ...props, children: [
+  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__ */ jsxs23("div", { className: ScProfileOptions_default.profileDetails, children: [
-      /* @__PURE__ */ jsxs23("div", { className: ScProfileOptions_default.workspaceInfo, children: [
+    /* @__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(
           ScBadges,
@@ -1814,7 +1859,7 @@ var ScProfileOptions = ({
       )
     ] }),
     /* @__PURE__ */ jsx30(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance2 }),
-    /* @__PURE__ */ jsxs23("div", { className: ScProfileOptions_default.settingsOptions, children: [
+    /* @__PURE__ */ jsxs24("div", { className: ScProfileOptions_default.settingsOptions, children: [
       /* @__PURE__ */ jsx30(
         ScMenuOptions,
         {
@@ -1894,6 +1939,9 @@ var ScProfileSettingsComp_default = {
 // src/SC-ProfileSettingsComp/ScProfileSettingsComp.tsx
 import { SiconBolt as SiconBolt3, SiconLock } from "@streamoid/icons";
 
+// src/SC-textField/ScTextField.tsx
+import { useState as useState3 } from "react";
+
 // src/SC-textField/ScTextField.module.css
 var ScTextField_default = {
   scTextField: "ScTextField_scTextField",
@@ -1908,17 +1956,17 @@ var ScTextField_default = {
   "tf-group-icon-left-right": "ScTextField_tf-group-icon-left-right",
   "state-hover": "ScTextField_state-hover",
   "state-filled": "ScTextField_state-filled",
-  "state-ative-focused": "ScTextField_state-ative-focused",
+  "state-active": "ScTextField_state-active",
   ScTextField_labelContainer: "ScTextField_ScTextField_labelContainer"
 };
 
 // src/SC-textField/ScTextField.tsx
 import { SiconBolt as SiconBolt2 } from "@streamoid/icons";
-import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var ScTextField = ({
   tfRightIcon = /* @__PURE__ */ jsx31(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
   tfLeftIcon = /* @__PURE__ */ jsx31(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
-  state = "default",
+  state,
   tfGroup = "icon-right",
   labelGroup = "",
   className,
@@ -1926,28 +1974,38 @@ var ScTextField = ({
   label = "",
   ...props
 }) => {
-  const variantsClassName = ScTextField_default["state-" + state] + " " + ScTextField_default["tf-group-" + tfGroup] + " " + ScTextField_default["label-group-" + labelGroup];
-  return /* @__PURE__ */ jsxs24(
+  const [focused, setFocused] = useState3(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(
     "div",
     {
       className: ScTextField_default.scTextField + " " + className + " " + variantsClassName,
       children: [
-        labelGroup && /* @__PURE__ */ jsxs24("div", { className: ScTextField_default.labelContainer, children: [
-          /* @__PURE__ */ jsxs24("div", { className: ScTextField_default.label, children: [
+        labelGroup && /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.labelContainer, children: [
+          /* @__PURE__ */ jsxs25("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 }) })
         ] }),
-        /* @__PURE__ */ jsxs24("div", { className: ScTextField_default.inputContainer, children: [
+        /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.inputContainer, children: [
           (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx31(Fragment10, { children: tfLeftIcon }),
           /* @__PURE__ */ jsx31(
             "input",
             {
               className: ScTextField_default.inputText,
               placeholder: placeholderFilled,
-              ...props
+              ...props,
+              onFocus: (e) => {
+                setFocused(true);
+                props.onFocus?.(e);
+              },
+              onBlur: (e) => {
+                setFocused(false);
+                props.onBlur?.(e);
+              }
             }
           ),
           (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx31(Fragment10, { children: tfRightIcon })
@@ -1958,7 +2016,7 @@ var ScTextField = ({
 };
 
 // src/SC-ProfileSettingsComp/ScProfileSettingsComp.tsx
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var ScProfileSettingsComp = ({
   firstName = "Chris",
   lastName = "Hemsworth",
@@ -1966,15 +2024,15 @@ var ScProfileSettingsComp = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs25("div", { className: ScProfileSettingsComp_default.scProfileSettingsComp + " " + className, ...props, children: [
+  return /* @__PURE__ */ jsxs26("div", { className: ScProfileSettingsComp_default.scProfileSettingsComp + " " + className, ...props, children: [
     /* @__PURE__ */ jsx32(
       ScProfileImageUpdate,
       {
         className: ScProfileSettingsComp_default.scProfileImageUpdateInstance
       }
     ),
-    /* @__PURE__ */ jsxs25("div", { className: ScProfileSettingsComp_default.profileInfo, children: [
-      /* @__PURE__ */ jsxs25("div", { className: ScProfileSettingsComp_default.nameFields, children: [
+    /* @__PURE__ */ jsxs26("div", { className: ScProfileSettingsComp_default.profileInfo, children: [
+      /* @__PURE__ */ jsxs26("div", { className: ScProfileSettingsComp_default.nameFields, children: [
         /* @__PURE__ */ jsx32(
           ScTextField,
           {
@@ -2022,7 +2080,7 @@ var ScRole_default = {
 };
 
 // src/SC-Role/ScRole.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var ScRole = ({
   type = "admin",
   label,
@@ -2036,7 +2094,7 @@ var ScRole = ({
     {
       className: ScRole_default.scRole + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs26("div", { className: ScRole_default.role, children: [
+      children: /* @__PURE__ */ jsxs27("div", { className: ScRole_default.role, children: [
         displayLabel,
         " "
       ] })
@@ -2086,7 +2144,7 @@ var ScSidebarMenu_default = {
 
 // src/SC-Sidebar menu/ScSidebarMenu.tsx
 import { SiconHome as SiconHome9 } from "@streamoid/icons";
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var ScSidebarMenu = ({
   icon = /* @__PURE__ */ jsx34(SiconHome9, { className: ScSidebarMenu_default.siconHomeInstance }),
   state = "default",
@@ -2096,14 +2154,14 @@ var ScSidebarMenu = ({
   ...props
 }) => {
   const variantsClassName = ScSidebarMenu_default["state-" + state] + " " + ScSidebarMenu_default["variant-" + variant];
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: ScSidebarMenu_default.scSidebarMenu + " " + className + " " + variantsClassName,
       ...props,
       children: [
         icon,
-        variant === "expanded" && /* @__PURE__ */ jsx34(Fragment11, { children: /* @__PURE__ */ jsxs27("div", { className: ScSidebarMenu_default.content, children: [
+        variant === "expanded" && /* @__PURE__ */ jsx34(Fragment11, { children: /* @__PURE__ */ jsxs28("div", { className: ScSidebarMenu_default.content, children: [
           text,
           " "
         ] }) })
@@ -2184,7 +2242,7 @@ var ScVersion_default = {
 
 // src/SC-version/ScVersion.tsx
 import { SiconCollapse } from "@streamoid/icons";
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var ScVersion = ({
   state = "expanded",
   version = "v2.1.2",
@@ -2194,7 +2252,7 @@ var ScVersion = ({
   ...props
 }) => {
   const variantsClassName = ScVersion_default["state-" + state];
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: ScVersion_default.scVersion + " " + className + " " + variantsClassName,
@@ -2207,7 +2265,7 @@ var ScVersion = ({
             className: ScVersion_default.scSidebarIconsInstance
           }
         ) }) }),
-        /* @__PURE__ */ jsxs28("div", { className: ScVersion_default.content, children: [
+        /* @__PURE__ */ jsxs29("div", { className: ScVersion_default.content, children: [
           version,
           " "
         ] }),
@@ -2225,7 +2283,7 @@ var ScVersion = ({
 };
 
 // src/SC-Sidebar/ScSidebar.tsx
-import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var ScSidebar = ({
   state = "expanded",
   className,
@@ -2233,13 +2291,13 @@ var ScSidebar = ({
   ...props
 }) => {
   const variantsClassName = ScSidebar_default["state-" + state];
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: ScSidebar_default.scSidebar + " " + className + " " + variantsClassName,
       children: [
-        state === "collapsed" && /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.collapsedContainer, children: [
-          /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.collapsedItems, 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(
               ScLogoUnit,
               {
@@ -2257,7 +2315,7 @@ var ScSidebar = ({
               }
             ) }),
             /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance }),
-            /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.collapsedItemGroup, children: [
+            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItemGroup, children: [
               /* @__PURE__ */ jsx38(
                 ScSidebarMenu,
                 {
@@ -2293,7 +2351,7 @@ var ScSidebar = ({
               )
             ] }),
             /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance2 }),
-            /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.collapsedItemGroup, children: [
+            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItemGroup, children: [
               /* @__PURE__ */ jsx38(
                 ScSidebarMenu,
                 {
@@ -2314,7 +2372,7 @@ var ScSidebar = ({
               )
             ] }),
             /* @__PURE__ */ jsx38(ScHDivider, { className: ScSidebar_default.scHDividerInstance3 }),
-            /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.collapsedItemGroup, children: [
+            /* @__PURE__ */ jsxs30("div", { className: ScSidebar_default.collapsedItemGroup, children: [
               /* @__PURE__ */ jsx38(
                 ScSidebarMenu,
                 {
@@ -2380,8 +2438,8 @@ var ScSidebar = ({
             }
           )
         ] }) }),
-        state === "expanded" && /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.expandedContainer, children: [
-          /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.expandedItems, children: [
+        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(
               ScSidebarMenu,
@@ -2391,7 +2449,7 @@ var ScSidebar = ({
                 className: ScSidebar_default.scSidebarMenuInstance
               }
             ) }),
-            /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.expandedItemGroup, children: [
+            /* @__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(
                 ScSidebarMenu,
@@ -2424,7 +2482,7 @@ var ScSidebar = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.expandedItemGroup, children: [
+            /* @__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(
                 ScSidebarMenu,
@@ -2443,7 +2501,7 @@ var ScSidebar = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs29("div", { className: ScSidebar_default.expandedItemGroup, children: [
+            /* @__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(
                 ScSidebarMenu,
@@ -2516,7 +2574,7 @@ var ScSidebar = ({
 };
 
 // src/SC-Sidebar-new/streamoid-sidebar.tsx
-import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs31 } 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(
     "div",
@@ -2590,6 +2648,7 @@ function StreamoidSidebar({
   profile,
   versionText = "v1.0.0",
   toggleIcon,
+  hideFooter = false,
   className,
   style
 }) {
@@ -2599,7 +2658,7 @@ function StreamoidSidebar({
       {
         className: `flex h-full items-center shrink-0 ${className ?? ""}`.trim(),
         style: { padding: "var(--spacing-3xl)", ...style },
-        children: /* @__PURE__ */ jsxs30(
+        children: /* @__PURE__ */ jsxs31(
           "div",
           {
             className: "flex flex-col h-full relative shrink-0",
@@ -2607,6 +2666,7 @@ function StreamoidSidebar({
               backgroundColor: "var(--alias-surface-base)",
               borderRadius: "var(--radius-3xl)",
               padding: "var(--spacing-md)",
+              paddingBottom: hideFooter ? "var(--spacing-md)" : void 0,
               width: 256,
               gap: "var(--spacing-xxs)"
             },
@@ -2622,7 +2682,7 @@ function StreamoidSidebar({
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs30(
+              /* @__PURE__ */ jsxs31(
                 "div",
                 {
                   className: "flex flex-col flex-1 items-start min-h-0 w-full overflow-y-auto sidebar-scroll",
@@ -2644,7 +2704,7 @@ function StreamoidSidebar({
                         })
                       }
                     ),
-                    config.sections.map((section) => /* @__PURE__ */ jsxs30(
+                    config.sections.map((section) => /* @__PURE__ */ jsxs31(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0 w-full",
@@ -2689,13 +2749,14 @@ function StreamoidSidebar({
                 }
               ) : null,
               /* @__PURE__ */ jsx39(HDivider, {}),
-              profile ? /* @__PURE__ */ jsxs30(Fragment14, { children: [
-                /* @__PURE__ */ jsxs30(
+              profile ? /* @__PURE__ */ jsxs31(Fragment14, { children: [
+                /* @__PURE__ */ jsxs31(
                   "div",
                   {
                     className: "flex items-center shrink-0 w-full cursor-pointer",
                     style: {
                       padding: "var(--spacing-md)",
+                      marginTop: "var(--spacing-md)",
                       gap: "var(--spacing-md)",
                       borderRadius: "var(--radius-xl)"
                     },
@@ -2708,7 +2769,7 @@ function StreamoidSidebar({
                     },
                     children: [
                       profile.avatar,
-                      /* @__PURE__ */ jsxs30("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxs31("div", { className: "flex flex-col flex-1 min-w-0", children: [
                         /* @__PURE__ */ jsx39(
                           "span",
                           {
@@ -2729,9 +2790,12 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx39(HDivider, {})
+                !hideFooter && /* @__PURE__ */ jsxs31(Fragment14, { children: [
+                  /* @__PURE__ */ jsx39("div", { style: { marginTop: "var(--spacing-md)" } }),
+                  /* @__PURE__ */ jsx39(HDivider, {})
+                ] })
               ] }) : null,
-              /* @__PURE__ */ jsx39("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs30(
+              !hideFooter && /* @__PURE__ */ jsx39("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs31(
                 "div",
                 {
                   className: "flex items-center w-full",
@@ -2774,7 +2838,7 @@ function StreamoidSidebar({
     {
       className: `flex h-full items-center justify-center shrink-0 ${className ?? ""}`.trim(),
       style,
-      children: /* @__PURE__ */ jsxs30(
+      children: /* @__PURE__ */ jsxs31(
         "div",
         {
           className: "flex flex-col h-full items-center justify-center relative shrink-0",
@@ -2794,14 +2858,14 @@ function StreamoidSidebar({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs30(
+            /* @__PURE__ */ jsxs31(
               "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__ */ jsxs30(Fragment14, { children: [
+                  config.topItem ? /* @__PURE__ */ jsxs31(Fragment14, { children: [
                     /* @__PURE__ */ jsx39(
                       "div",
                       {
@@ -2819,7 +2883,7 @@ function StreamoidSidebar({
                     ),
                     /* @__PURE__ */ jsx39(HDivider, {})
                   ] }) : null,
-                  config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center w-full", children: [
+                  config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center w-full", children: [
                     /* @__PURE__ */ jsx39(
                       "div",
                       {
@@ -2863,7 +2927,7 @@ function StreamoidSidebar({
               }
             ) : null,
             /* @__PURE__ */ jsx39(HDivider, {}),
-            profile ? /* @__PURE__ */ jsxs30(Fragment14, { children: [
+            profile ? /* @__PURE__ */ jsxs31(Fragment14, { children: [
               /* @__PURE__ */ jsx39(
                 "div",
                 {
@@ -2884,7 +2948,7 @@ function StreamoidSidebar({
               ),
               /* @__PURE__ */ jsx39(HDivider, {})
             ] }) : null,
-            /* @__PURE__ */ jsxs30(
+            !hideFooter && /* @__PURE__ */ jsxs31(
               "div",
               {
                 className: "shrink-0 flex flex-col items-center",
@@ -2934,13 +2998,13 @@ var ScSlider_default = {
 };
 
 // src/SC-Slider/ScSlider.tsx
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 var ScSlider = ({
   className,
   onValueChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs31("div", { className: ScSlider_default.scSlider + " " + className, ...props, children: [
+  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 }),
@@ -2955,14 +3019,14 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-import { useEffect, useRef } from "react";
+import { useEffect, useRef as useRef2 } from "react";
 import {
   SiconClose,
   SiconTeam as SiconTeam4,
   SiconCrown,
   SiconSwitch
 } from "@streamoid/icons";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } 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";
@@ -2980,7 +3044,7 @@ function WorkspaceRow({
   switchWorkspaceText,
   onSwitch
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: "relative shrink-0 w-full",
@@ -3001,7 +3065,7 @@ function WorkspaceRow({
             }
           }
         ),
-        /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs33(
           "div",
           {
             className: "flex items-center w-full",
@@ -3010,7 +3074,7 @@ function WorkspaceRow({
               padding: "var(--spacing-6xl)"
             },
             children: [
-              /* @__PURE__ */ jsxs32(
+              /* @__PURE__ */ jsxs33(
                 "div",
                 {
                   className: "flex flex-1 items-center min-w-0",
@@ -3043,7 +3107,7 @@ function WorkspaceRow({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs32(
+              /* @__PURE__ */ jsxs33(
                 "div",
                 {
                   className: "flex items-center justify-center shrink-0",
@@ -3060,7 +3124,7 @@ function WorkspaceRow({
                         style: { width: 80 }
                       }
                     ),
-                    /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center self-stretch", children: /* @__PURE__ */ jsxs32(
+                    /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center self-stretch", children: /* @__PURE__ */ jsxs33(
                       "div",
                       {
                         className: "flex items-center shrink-0",
@@ -3076,7 +3140,7 @@ function WorkspaceRow({
                             }
                           ) }),
                           /* @__PURE__ */ jsx41(ScVDivider, {}),
-                          /* @__PURE__ */ jsxs32(
+                          /* @__PURE__ */ jsxs33(
                             "div",
                             {
                               className: "flex items-center",
@@ -3151,7 +3215,7 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = useRef(null);
+  const modalRef = useRef2(null);
   const title = config?.title || "Switch workspace";
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
@@ -3173,7 +3237,7 @@ function StreamoidWorkspaceSwitcher({
       onClick: (e) => {
         if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs33(
         "div",
         {
           ref: modalRef,
@@ -3193,7 +3257,7 @@ function StreamoidWorkspaceSwitcher({
                 style: {
                   borderBottom: "1px solid var(--alias-border-divider)"
                 },
-                children: /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs32(
+                children: /* @__PURE__ */ jsx41("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs33(
                   "div",
                   {
                     className: "flex items-center w-full",
@@ -3229,7 +3293,7 @@ function StreamoidWorkspaceSwitcher({
                 style: {
                   borderRadius: "0 0 var(--radius-4xl) var(--radius-4xl)"
                 },
-                children: /* @__PURE__ */ jsxs32(
+                children: /* @__PURE__ */ jsxs33(
                   "div",
                   {
                     className: "flex flex-col items-start",
@@ -3288,7 +3352,7 @@ var ScAppListingCard_default = {
 
 // src/SC-app listing card/ScAppListingCard.tsx
 import { SiconCart } from "@streamoid/icons";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var ScAppListingCard = ({
   icon = /* @__PURE__ */ jsx42(SiconCart, { className: ScAppListingCard_default.siconCartInstance }),
   title = "Stores",
@@ -3296,15 +3360,15 @@ var ScAppListingCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs33("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs33("div", { className: ScAppListingCard_default.header, children: [
+  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__ */ jsxs33("div", { className: ScAppListingCard_default.title, children: [
+      /* @__PURE__ */ jsxs34("div", { className: ScAppListingCard_default.title, children: [
         title,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ jsxs33("div", { className: ScAppListingCard_default.description, children: [
+    /* @__PURE__ */ jsxs34("div", { className: ScAppListingCard_default.description, children: [
       descrp,
       " "
     ] })
@@ -3322,7 +3386,7 @@ var ScAppCard_default = {
 
 // src/SC-appCard/ScAppCard.tsx
 import { SiconArtifacts as SiconArtifacts2 } from "@streamoid/icons";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 var ScAppCard = ({
   appIcon = /* @__PURE__ */ jsx43(SiconArtifacts2, { className: ScAppCard_default.siconArtifactsInstance }),
   appName = "Artifax",
@@ -3330,14 +3394,14 @@ var ScAppCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs34("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
+  return /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
     /* @__PURE__ */ jsx43("div", { className: ScAppCard_default.iconContainer, children: appIcon }),
-    /* @__PURE__ */ jsxs34("div", { className: ScAppCard_default.textContainer, children: [
-      /* @__PURE__ */ jsxs34("div", { className: ScAppCard_default.title, children: [
+    /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.textContainer, children: [
+      /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.title, children: [
         appName,
         " "
       ] }),
-      /* @__PURE__ */ jsxs34("div", { className: ScAppCard_default.subtitle, children: [
+      /* @__PURE__ */ jsxs35("div", { className: ScAppCard_default.subtitle, children: [
         appDescription,
         " "
       ] })
@@ -3376,67 +3440,53 @@ var ScToggleSwitch_default = {
 };
 
 // src/SC-toggleSwitch/ScToggleSwitch.tsx
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 var ScToggleSwitch = ({
   active = "false",
+  checked,
+  onToggle,
   className,
   ...props
 }) => {
-  const variantsClassName = ScToggleSwitch_default["active-" + active];
+  const isActive = checked !== void 0 ? checked : active === "true";
+  const variantsClassName = ScToggleSwitch_default["active-" + (isActive ? "true" : "false")];
   return /* @__PURE__ */ jsx44(
     "div",
     {
       className: ScToggleSwitch_default.scToggleSwitch + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs35(
-        "svg",
-        {
-          width: "41",
-          height: "25",
-          viewBox: "0 0 41 25",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: [
-            /* @__PURE__ */ jsx44(
-              "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__ */ jsx44(
-              "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__ */ jsx44(
-              "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)"
-              }
-            )
-          ]
-        }
-      )
+      onClick: (e) => {
+        onToggle?.(!isActive);
+        props.onClick?.(e);
+      },
+      style: { cursor: "pointer", ...props.style },
+      children: isActive ? /* @__PURE__ */ jsxs36("svg", { width: "40", height: "24", viewBox: "0 0 40 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx44("rect", { width: "40", height: "24", rx: "12", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+        /* @__PURE__ */ jsx44("circle", { cx: "28", cy: "12", r: "10", fill: "var(--alias-text---icons-inverse, #101010)" })
+      ] }) : /* @__PURE__ */ jsxs36("svg", { width: "41", height: "25", viewBox: "0 0 41 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx44("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__ */ jsx44("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__ */ jsx44("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 jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 var ScArtifaxInvite = ({
   active = "true",
   appName = "Artifax",
   appDescription = "Info about artifax",
   appIcon,
   className,
+  enabled,
+  onToggle,
   ...props
 }) => {
-  const variantsClassName = ScArtifaxInvite_default["active-" + active];
-  return /* @__PURE__ */ jsxs36(
+  const isEnabled = enabled !== void 0 ? enabled : active === "true";
+  const variantsClassName = ScArtifaxInvite_default["active-" + (isEnabled ? "true" : "false")];
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       className: ScArtifaxInvite_default.scArtifaxInvite + " " + className + " " + variantsClassName,
@@ -3454,7 +3504,8 @@ var ScArtifaxInvite = ({
         /* @__PURE__ */ jsx45(
           ScToggleSwitch,
           {
-            active: "false",
+            checked: isEnabled,
+            onToggle,
             className: ScArtifaxInvite_default.scToggleSwitchInstance
           }
         )
@@ -3476,17 +3527,20 @@ var ScPhtogenixInvite_default = {
 
 // src/SC-phtogenixInvite/ScPhtogenixInvite.tsx
 import { SiconArtifacts as SiconArtifacts4 } from "@streamoid/icons";
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var ScPhtogenixInvite = ({
   active = "true",
   scAppCardappDescription = "Info about photogenix",
   scAppCardappName = "Photogenix",
   scAppCardappIcon = /* @__PURE__ */ jsx46(SiconArtifacts4, { className: ScPhtogenixInvite_default.siconArtifactsInstance }),
   className,
+  enabled,
+  onToggle,
   ...props
 }) => {
-  const variantsClassName = ScPhtogenixInvite_default["active-" + active];
-  return /* @__PURE__ */ jsxs37(
+  const isEnabled = enabled !== void 0 ? enabled : active === "true";
+  const variantsClassName = ScPhtogenixInvite_default["active-" + (isEnabled ? "true" : "false")];
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       className: ScPhtogenixInvite_default.scPhtogenixInvite + " " + className + " " + variantsClassName,
@@ -3503,7 +3557,8 @@ var ScPhtogenixInvite = ({
         /* @__PURE__ */ jsx46(
           ScToggleSwitch,
           {
-            active: "false",
+            checked: isEnabled,
+            onToggle,
             className: ScPhtogenixInvite_default.scToggleSwitchInstance
           }
         )
@@ -3546,7 +3601,7 @@ var ScOnlyField_default = {
 
 // src/SC-onlyField/ScOnlyField.tsx
 import { SiconBolt as SiconBolt4 } from "@streamoid/icons";
-import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
 var ScOnlyField = ({
   tfRightIcon = /* @__PURE__ */ jsx47(SiconBolt4, { className: ScOnlyField_default.siconBoltInstance }),
   tfLeftIcon = /* @__PURE__ */ jsx47(SiconBolt4, { className: ScOnlyField_default.siconBoltInstance }),
@@ -3555,6 +3610,9 @@ var ScOnlyField = ({
   labelGroup = "none",
   className,
   placeholderFilled = "Placeholder",
+  value,
+  onInputChange,
+  inputProps,
   ...props
 }) => {
   const variantsClassName = ScOnlyField_default["state-" + state] + " " + ScOnlyField_default["tf-group-" + tfGroup] + " " + ScOnlyField_default["label-group-" + labelGroup];
@@ -3563,12 +3621,28 @@ var ScOnlyField = ({
     {
       className: ScOnlyField_default.scOnlyField + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs38("div", { className: ScOnlyField_default.inputContainer, children: [
+      children: /* @__PURE__ */ jsxs39("div", { className: ScOnlyField_default.inputContainer, children: [
         (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx47(Fragment15, { children: tfLeftIcon }),
-        /* @__PURE__ */ jsxs38("div", { className: ScOnlyField_default.inputText, children: [
-          placeholderFilled,
-          " "
-        ] }),
+        /* @__PURE__ */ jsx47(
+          "input",
+          {
+            className: ScOnlyField_default.inputText,
+            placeholder: placeholderFilled,
+            value,
+            onChange: (e) => onInputChange?.(e.target.value),
+            style: {
+              background: "transparent",
+              border: "none",
+              outline: "none",
+              font: "inherit",
+              color: "inherit",
+              width: "100%",
+              padding: 0,
+              margin: 0
+            },
+            ...inputProps
+          }
+        ),
         (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx47(Fragment15, { children: tfRightIcon })
       ] })
     }
@@ -3577,7 +3651,7 @@ var ScOnlyField = ({
 
 // src/SC-catalogixInvite/ScCatalogixInvite.tsx
 import { SiconHome as SiconHome10 } from "@streamoid/icons";
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 var ScCatalogixInvite = ({
   active = "false",
   appName = "Catalogix",
@@ -3587,16 +3661,25 @@ var ScCatalogixInvite = ({
   searchPlaceholder = "Search stores...",
   appIcon,
   className,
+  enabled,
+  onToggle,
+  stores,
+  selectedStores,
+  onStoreToggle,
+  searchValue,
+  onSearchChange,
   ...props
 }) => {
-  const variantsClassName = ScCatalogixInvite_default["active-" + active];
-  return /* @__PURE__ */ jsxs39(
+  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__ */ jsxs40(
     "div",
     {
       className: ScCatalogixInvite_default.scCatalogixInvite + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs39("div", { className: ScCatalogixInvite_default.appHeader, children: [
+        /* @__PURE__ */ jsxs40("div", { className: ScCatalogixInvite_default.appHeader, children: [
           /* @__PURE__ */ jsx48(
             ScAppCard,
             {
@@ -3609,19 +3692,20 @@ var ScCatalogixInvite = ({
           /* @__PURE__ */ jsx48(
             ScToggleSwitch,
             {
-              active: "false",
+              checked: isEnabled,
+              onToggle,
               className: ScCatalogixInvite_default.scToggleSwitchInstance
             }
           )
         ] }),
-        active === "true" && /* @__PURE__ */ jsx48(Fragment16, { children: /* @__PURE__ */ jsxs39("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
-          /* @__PURE__ */ jsxs39("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
-            /* @__PURE__ */ jsxs39("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
+        isEnabled && /* @__PURE__ */ jsx48(Fragment16, { children: /* @__PURE__ */ jsxs40("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
+          /* @__PURE__ */ jsxs40("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
+            /* @__PURE__ */ jsxs40("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
               storeAccessTitle,
               " "
             ] }),
-            /* @__PURE__ */ jsxs39("div", { className: ScCatalogixInvite_default.selectedCount, children: [
-              selectedCount,
+            /* @__PURE__ */ jsxs40("div", { className: ScCatalogixInvite_default.selectedCount, children: [
+              displayCount,
               " "
             ] })
           ] }),
@@ -3631,10 +3715,29 @@ var ScCatalogixInvite = ({
               tfLeftIcon: /* @__PURE__ */ jsx48(SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
               tfRightIcon: /* @__PURE__ */ jsx48(SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
               placeholderFilled: searchPlaceholder,
+              value: searchValue,
+              onInputChange: onSearchChange,
               className: ScCatalogixInvite_default.scOnlyFieldInstance
             }
           ),
-          /* @__PURE__ */ jsxs39("div", { className: ScCatalogixInvite_default.storeListContainer, children: [
+          /* @__PURE__ */ jsx48("div", { className: ScCatalogixInvite_default.storeListContainer, children: stores ? stores.length > 0 ? stores.map((store) => /* @__PURE__ */ jsx48(
+            ScPairtext,
+            {
+              content: store.name,
+              iconPosition: "right",
+              type: "checkbox",
+              checked: selectedStores?.includes(store.id),
+              onChange: () => onStoreToggle?.(store.id),
+              className: ScCatalogixInvite_default.scPairtextInstance
+            },
+            store.id
+          )) : /* @__PURE__ */ jsx48("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__ */ jsxs40(Fragment16, { children: [
             /* @__PURE__ */ jsx48(
               ScPairtext,
               {
@@ -3680,7 +3783,7 @@ var ScCatalogixInvite = ({
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             )
-          ] })
+          ] }) })
         ] }) })
       ]
     }
@@ -3688,27 +3791,42 @@ var ScCatalogixInvite = ({
 };
 
 // src/SC-appField/ScAppField.tsx
-import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 var ScAppField = ({
   appFieldTitle = "App permission",
   className,
+  artifaxEnabled,
+  onArtifaxToggle,
+  photogenixEnabled,
+  onPhotogenixToggle,
+  catalogixEnabled,
+  onCatalogixToggle,
+  catalogixStores,
+  catalogixSelectedStores,
+  onCatalogixStoreToggle,
+  catalogixSearchValue,
+  onCatalogixSearchChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs40("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx49("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ jsxs40("div", { className: ScAppField_default.title, children: [
+  return /* @__PURE__ */ jsxs41("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx49("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ jsxs41("div", { className: ScAppField_default.title, children: [
       appFieldTitle,
       " "
     ] }) }),
-    /* @__PURE__ */ jsxs40("div", { className: ScAppField_default.inputContainer, children: [
+    /* @__PURE__ */ jsxs41("div", { className: ScAppField_default.inputContainer, children: [
       /* @__PURE__ */ jsx49(
         ScArtifaxInvite,
         {
+          enabled: artifaxEnabled,
+          onToggle: onArtifaxToggle,
           className: ScAppField_default.scArtifaxInviteInstance
         }
       ),
       /* @__PURE__ */ jsx49(
         ScPhtogenixInvite,
         {
+          enabled: photogenixEnabled,
+          onToggle: onPhotogenixToggle,
           scAppCardappDescription: "Info about photogenix",
           scAppCardappName: "Photogenix",
           scAppCardappIcon: /* @__PURE__ */ jsx49(SiconPhotogenix2, { className: ScAppField_default.siconPhotogenixInstance }),
@@ -3718,6 +3836,13 @@ var ScAppField = ({
       /* @__PURE__ */ jsx49(
         ScCatalogixInvite,
         {
+          enabled: catalogixEnabled,
+          onToggle: onCatalogixToggle,
+          stores: catalogixStores,
+          selectedStores: catalogixSelectedStores,
+          onStoreToggle: onCatalogixStoreToggle,
+          searchValue: catalogixSearchValue,
+          onSearchChange: onCatalogixSearchChange,
           active: "true",
           className: ScAppField_default.scCatalogixInviteInstance
         }
@@ -3735,12 +3860,12 @@ var ScBillingHistoryHeader_default = {
 };
 
 // src/SC-billingHistoryHeader/ScBillingHistoryHeader.tsx
-import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 var ScBillingHistoryHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs41("div", { className: ScBillingHistoryHeader_default.scBillingHistoryHeader + " " + className, children: [
+  return /* @__PURE__ */ jsxs42("div", { className: ScBillingHistoryHeader_default.scBillingHistoryHeader + " " + className, children: [
     /* @__PURE__ */ jsx50(
       ScHeader,
       {
@@ -3787,18 +3912,29 @@ var ScCheckField_default = {
 
 // src/SC-checkField/ScCheckField.tsx
 import { SiconHome as SiconHome11 } from "@streamoid/icons";
-import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var ScCheckField = ({
   label = "Label",
   className,
+  checkboxes,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs42("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
-    /* @__PURE__ */ jsx51("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ jsxs42("div", { className: ScCheckField_default.label, children: [
+  return /* @__PURE__ */ jsxs43("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
+    /* @__PURE__ */ jsx51("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ jsxs43("div", { className: ScCheckField_default.label, children: [
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ jsxs42("div", { className: ScCheckField_default.tabSwitcher, children: [
+    /* @__PURE__ */ jsx51("div", { className: ScCheckField_default.tabSwitcher, children: checkboxes ? checkboxes.map((item, i) => /* @__PURE__ */ jsx51(
+      ScPairtext,
+      {
+        content: item.label,
+        type: "checkbox",
+        checked: item.checked,
+        onChange: item.onChange,
+        className: ScCheckField_default.scPairtextInstance
+      },
+      i
+    )) : /* @__PURE__ */ jsxs43(Fragment17, { children: [
       /* @__PURE__ */ jsx51(
         ScPairtext,
         {
@@ -3815,7 +3951,7 @@ var ScCheckField = ({
           className: ScCheckField_default.scPairtextInstance
         }
       )
-    ] })
+    ] }) })
   ] });
 };
 
@@ -3831,7 +3967,7 @@ var ScFieldButton_default = {
 
 // src/SC-fieldButton/ScFieldButton.tsx
 import { SiconHome as SiconHome12 } from "@streamoid/icons";
-import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 var ScFieldButton = ({
   icon = /* @__PURE__ */ jsx52(SiconHome12, { className: ScFieldButton_default.siconHomeInstance }),
   type = "default",
@@ -3846,13 +3982,13 @@ var ScFieldButton = ({
     {
       className: ScFieldButton_default.scFieldButton + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ jsxs43("div", { className: ScFieldButton_default.container, children: [
-        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ jsx52(Fragment17, { children: icon }),
-        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ jsx52(Fragment17, { children: /* @__PURE__ */ jsxs43("div", { className: ScFieldButton_default.label, children: [
+      children: /* @__PURE__ */ jsxs44("div", { className: ScFieldButton_default.container, children: [
+        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ jsx52(Fragment18, { children: icon }),
+        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ jsx52(Fragment18, { children: /* @__PURE__ */ jsxs44("div", { className: ScFieldButton_default.label, children: [
           text,
           " "
         ] }) }),
-        type === "icon-left" && /* @__PURE__ */ jsx52(Fragment17, { children: icon })
+        type === "icon-left" && /* @__PURE__ */ jsx52(Fragment18, { children: icon })
       ] })
     }
   );
@@ -3867,12 +4003,12 @@ var ScPendingAction_default = {
 
 // src/SC-pendingAction/ScPendingAction.tsx
 import { SiconHome as SiconHome13 } from "@streamoid/icons";
-import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
 var ScPendingAction = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs44("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
+  return /* @__PURE__ */ jsxs45("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
     /* @__PURE__ */ jsx53(
       ScButton,
       {
@@ -3912,7 +4048,7 @@ var ScQuickPrompt_default = {
 
 // src/SC-quick prompt/ScQuickPrompt.tsx
 import { SiconBolt as SiconBolt5 } from "@streamoid/icons";
-import { jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
 var ScQuickPrompt = ({
   appName = "Photogenix",
   heading = "Swap Model and Background",
@@ -3920,20 +4056,20 @@ var ScQuickPrompt = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs45("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs45("div", { className: ScQuickPrompt_default.header, children: [
+  return /* @__PURE__ */ jsxs46("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs46("div", { className: ScQuickPrompt_default.header, children: [
       /* @__PURE__ */ jsx54("div", { className: ScQuickPrompt_default.iconContainer, children: /* @__PURE__ */ jsx54(SiconBolt5, { className: ScQuickPrompt_default.siconBoltInstance }) }),
-      /* @__PURE__ */ jsx54("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ jsxs45("div", { className: ScQuickPrompt_default.title, children: [
+      /* @__PURE__ */ jsx54("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ jsxs46("div", { className: ScQuickPrompt_default.title, children: [
         appName,
         " "
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs45("div", { className: ScQuickPrompt_default.body, children: [
-      /* @__PURE__ */ jsxs45("div", { className: ScQuickPrompt_default.heading, children: [
+    /* @__PURE__ */ jsxs46("div", { className: ScQuickPrompt_default.body, children: [
+      /* @__PURE__ */ jsxs46("div", { className: ScQuickPrompt_default.heading, children: [
         heading,
         " "
       ] }),
-      /* @__PURE__ */ jsxs45("div", { className: ScQuickPrompt_default.description, children: [
+      /* @__PURE__ */ jsxs46("div", { className: ScQuickPrompt_default.description, children: [
         description,
         " "
       ] })
@@ -3950,12 +4086,12 @@ var ScReferralTableHeader_default = {
 };
 
 // src/SC-referralTableHeader/ScReferralTableHeader.tsx
-import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs47 } from "react/jsx-runtime";
 var ScReferralTableHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs46("div", { className: ScReferralTableHeader_default.scReferralTableHeader + " " + className, children: [
+  return /* @__PURE__ */ jsxs47("div", { className: ScReferralTableHeader_default.scReferralTableHeader + " " + className, children: [
     /* @__PURE__ */ jsx55(
       ScHeader,
       {
@@ -4001,7 +4137,7 @@ var ScReferralTableList_default = {
 };
 
 // src/SC-referralTableList/ScReferralTableList.tsx
-import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
 var ScReferralTableList = ({
   userEmail = "chris@kepler.com",
   userName,
@@ -4011,7 +4147,7 @@ var ScReferralTableList = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs47("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
+  return /* @__PURE__ */ jsxs48("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
     /* @__PURE__ */ jsx56(
       ScProfile,
       {
@@ -4020,12 +4156,12 @@ var ScReferralTableList = ({
         className: ScReferralTableList_default.scProfileInstance
       }
     ),
-    /* @__PURE__ */ jsxs47("div", { className: ScReferralTableList_default.date, children: [
+    /* @__PURE__ */ jsxs48("div", { className: ScReferralTableList_default.date, children: [
       date,
       " "
     ] }),
     /* @__PURE__ */ jsx56(ScBadges, { text: status, className: ScReferralTableList_default.scBadgesInstance }),
-    /* @__PURE__ */ jsxs47("div", { className: ScReferralTableList_default.points, children: [
+    /* @__PURE__ */ jsxs48("div", { className: ScReferralTableList_default.points, children: [
       points,
       " "
     ] })
@@ -4041,12 +4177,12 @@ var ScSettingsNav_default = {
 // src/SC-settingsNav/ScSettingsNav.tsx
 import { SiconTeam as SiconTeam5 } from "@streamoid/icons";
 import { SiconWorkspace, SiconReferral } from "@streamoid/icons";
-import { jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 var ScSettingsNav = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx57("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ jsxs48("div", { className: ScSettingsNav_default.container, children: [
+  return /* @__PURE__ */ jsx57("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ jsxs49("div", { className: ScSettingsNav_default.container, children: [
     /* @__PURE__ */ jsx57(
       ScSidebarMenu,
       {
@@ -4083,18 +4219,47 @@ var ScTabField_default = {
 };
 
 // src/SC-tabField/ScTabField.tsx
-import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 var ScTabField = ({
   label = "Label",
   className,
+  tabs,
+  activeTab,
+  onTabChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs49("div", { className: ScTabField_default.scTabField + " " + className, children: [
-    /* @__PURE__ */ jsx58("div", { className: ScTabField_default.labelContainer, children: /* @__PURE__ */ jsxs49("div", { className: ScTabField_default.label, children: [
+  return /* @__PURE__ */ jsxs50("div", { className: ScTabField_default.scTabField + " " + className, children: [
+    /* @__PURE__ */ jsx58("div", { className: ScTabField_default.labelContainer, children: /* @__PURE__ */ jsxs50("div", { className: ScTabField_default.label, children: [
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ jsx58(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
+    tabs ? /* @__PURE__ */ jsx58(
+      ScTabSwitcher,
+      {
+        tabCount: String(tabs.length),
+        className: ScTabField_default.scTabSwitcherInstance,
+        component: tabs[0] ? /* @__PURE__ */ jsx58(
+          ScTabComp,
+          {
+            text: tabs[0].label,
+            type: "text-only",
+            active: activeTab === tabs[0].value ? "true" : "false",
+            onClick: () => onTabChange?.(tabs[0].value),
+            style: { flex: 1 }
+          }
+        ) : void 0,
+        component2: tabs[1] ? /* @__PURE__ */ jsx58(
+          ScTabComp,
+          {
+            text: tabs[1].label,
+            type: "text-only",
+            active: activeTab === tabs[1].value ? "true" : "false",
+            onClick: () => onTabChange?.(tabs[1].value),
+            style: { flex: 1 }
+          }
+        ) : void 0
+      }
+    ) : /* @__PURE__ */ jsx58(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
   ] });
 };
 
@@ -4111,14 +4276,14 @@ var ScTableHeader_default = {
 };
 
 // src/SC-tableHeader/ScTableHeader.tsx
-import { Fragment as Fragment18, jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
 var ScTableHeader = ({
   type = "default",
   className,
   ...props
 }) => {
   const variantsClassName = ScTableHeader_default["type-" + type];
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "div",
     {
       className: ScTableHeader_default.scTableHeader + " " + className + " " + variantsClassName,
@@ -4155,7 +4320,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance4
           }
         ),
-        type === "pending" && /* @__PURE__ */ jsx59(Fragment18, { children: /* @__PURE__ */ jsx59(
+        type === "pending" && /* @__PURE__ */ jsx59(Fragment19, { children: /* @__PURE__ */ jsx59(
           ScHeader,
           {
             text: "Invite action",
@@ -4163,7 +4328,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance5
           }
         ) }),
-        type === "default" && /* @__PURE__ */ jsx59(Fragment18, { children: /* @__PURE__ */ jsx59(
+        type === "default" && /* @__PURE__ */ jsx59(Fragment19, { children: /* @__PURE__ */ jsx59(
           ScHeader,
           {
             text: "Signed On",
@@ -4197,7 +4362,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 jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
 var ScTableList = ({
   invitedBy = "Rohan",
   signedOn = "Nov 9th, 2025",
@@ -4209,7 +4374,7 @@ var ScTableList = ({
   ...props
 }) => {
   const variantsClassName = ScTableList_default["hover-" + hover] + " " + ScTableList_default["variant-" + variant];
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(
     "div",
     {
       className: ScTableList_default.scTableList + " " + className + " " + variantsClassName,
@@ -4224,7 +4389,7 @@ var ScTableList = ({
           }
         ),
         /* @__PURE__ */ jsx60(ScRole, { className: ScTableList_default.scRoleInstance }),
-        /* @__PURE__ */ jsxs51("div", { className: ScTableList_default.accessInfo, children: [
+        /* @__PURE__ */ jsxs52("div", { className: ScTableList_default.accessInfo, children: [
           /* @__PURE__ */ jsx60(
             ScAccess,
             {
@@ -4243,17 +4408,17 @@ var ScTableList = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs51("div", { className: ScTableList_default.userName, children: [
+        /* @__PURE__ */ jsxs52("div", { className: ScTableList_default.userName, children: [
           invitedBy,
           " "
         ] }),
-        variant === "pending" && /* @__PURE__ */ jsx60(Fragment19, { children: /* @__PURE__ */ jsx60(
+        variant === "pending" && /* @__PURE__ */ jsx60(Fragment20, { children: /* @__PURE__ */ jsx60(
           ScPendingAction,
           {
             className: ScTableList_default.scPendingActionInstance
           }
         ) }),
-        variant === "active" && /* @__PURE__ */ jsx60(Fragment19, { children: /* @__PURE__ */ jsxs51("div", { className: ScTableList_default.date, children: [
+        variant === "active" && /* @__PURE__ */ jsx60(Fragment20, { children: /* @__PURE__ */ jsxs52("div", { className: ScTableList_default.date, children: [
           signedOn,
           " "
         ] }) })
@@ -4288,7 +4453,7 @@ import {
   SiconSwitch as SiconSwitch2,
   SiconLogout as SiconLogout2
 } from "@streamoid/icons";
-import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs53 } from "react/jsx-runtime";
 var ScWorkspaceCard = ({
   workspaceName = "Stores",
   role = "Admin",
@@ -4298,20 +4463,20 @@ var ScWorkspaceCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs52("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
-    /* @__PURE__ */ jsxs52("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
+  return /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
+    /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
       /* @__PURE__ */ jsx61(
         ScIntialProfileCover,
         {
           className: ScWorkspaceCard_default.scIntialProfileCoverInstance
         }
       ),
-      /* @__PURE__ */ jsxs52("div", { className: ScWorkspaceCard_default.workspaceName, children: [
+      /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceCard_default.workspaceName, children: [
         workspaceName,
         " "
       ] })
     ] }),
-    /* @__PURE__ */ jsxs52("div", { className: ScWorkspaceCard_default.userInfo, children: [
+    /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceCard_default.userInfo, children: [
       /* @__PURE__ */ jsx61(
         ScBadges,
         {
@@ -4320,7 +4485,7 @@ var ScWorkspaceCard = ({
           className: ScWorkspaceCard_default.scBadgesInstance
         }
       ),
-      /* @__PURE__ */ jsxs52("div", { className: ScWorkspaceCard_default.userDetails, children: [
+      /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceCard_default.userDetails, children: [
         /* @__PURE__ */ jsx61(
           ScPairtext,
           {
@@ -4364,7 +4529,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3, SiconLogout as SiconLogout3 } from "@streamoid/icons";
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -4390,7 +4555,7 @@ var ScWorkspaceSwitchCard_default = {
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs54 } from "react/jsx-runtime";
 function ScWorkspaceSwitchCard({
   wsName = "Workspace name is kepler",
   role = "Admin",
@@ -4405,7 +4570,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = useState3(false);
+  const [internalHover, setInternalHover] = useState4(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -4426,7 +4591,7 @@ function ScWorkspaceSwitchCard({
       className: cardClass,
       onMouseEnter: () => setInternalHover(true),
       onMouseLeave: () => setInternalHover(false),
-      children: /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
+      children: /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
         /* @__PURE__ */ jsx62(
           ScDp,
           {
@@ -4441,20 +4606,20 @@ function ScWorkspaceSwitchCard({
             }
           }
         ),
-        /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
+        /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
           /* @__PURE__ */ jsx62("p", { className: ScWorkspaceSwitchCard_default.wsName, children: wsName }),
-          /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
-            /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+          /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
+            /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
               /* @__PURE__ */ jsx62("span", { className: roleColorClass, children: displayRole })
             ] }),
             /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
-            /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
+            /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Plan" }),
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan })
             ] }),
             /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
-            /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
+            /* @__PURE__ */ jsxs54("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Workspace Owner" }),
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
             ] })
@@ -4499,7 +4664,7 @@ function ScWorkspaceSwitchCard({
             )
           }
         ),
-        isHover && isOther && !isAdmin && /* @__PURE__ */ jsx62(
+        isHover && !isAdmin && /* @__PURE__ */ jsx62(
           "div",
           {
             className: ScWorkspaceSwitchCard_default.leaveBtn,
@@ -4553,7 +4718,7 @@ var ScProfileV2Mobile_default = {
 };
 
 // src/SC-Profile-V2-Mobile/ScProfileV2Mobile.tsx
-import { jsx as jsx64, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
 var ScProfileV2Mobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -4564,14 +4729,14 @@ var ScProfileV2Mobile = ({
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
   const profileImage = /* @__PURE__ */ jsx64("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx64("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ jsx64("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(
     "div",
     {
       className: ScProfileV2Mobile_default.scProfileV2Mobile + " " + className,
       ...props,
       children: [
         dpPosition === "left" && profileImage,
-        /* @__PURE__ */ jsxs54("div", { className: ScProfileV2Mobile_default.userInfo, children: [
+        /* @__PURE__ */ jsxs55("div", { className: ScProfileV2Mobile_default.userInfo, children: [
           /* @__PURE__ */ jsx64("p", { className: ScProfileV2Mobile_default.userName, children: name }),
           /* @__PURE__ */ jsx64("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
         ] }),
@@ -4600,7 +4765,7 @@ var ScTableListMobile_default = {
 };
 
 // src/SC-tableList-mobile/ScTableListMobile.tsx
-import { jsx as jsx65, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs56 } from "react/jsx-runtime";
 var ScTableListMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -4613,23 +4778,23 @@ var ScTableListMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       className: ScTableListMobile_default.scTableListMobile + " " + className,
       onClick: onRowClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs55("div", { className: ScTableListMobile_default.profileRow, children: [
-          /* @__PURE__ */ jsxs55("div", { className: ScTableListMobile_default.userInfo, children: [
+        /* @__PURE__ */ jsxs56("div", { className: ScTableListMobile_default.profileRow, children: [
+          /* @__PURE__ */ jsxs56("div", { className: ScTableListMobile_default.userInfo, children: [
             /* @__PURE__ */ jsx65("p", { className: ScTableListMobile_default.userName, children: name }),
             /* @__PURE__ */ jsx65("p", { className: ScTableListMobile_default.userEmail, children: email })
           ] }),
           /* @__PURE__ */ jsx65("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx65("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ jsx65("div", { className: ScTableListMobile_default.initials, children: initials }) })
         ] }),
-        /* @__PURE__ */ jsxs55("div", { className: ScTableListMobile_default.detailsRow, children: [
+        /* @__PURE__ */ jsxs56("div", { className: ScTableListMobile_default.detailsRow, children: [
           /* @__PURE__ */ jsx65("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ jsx65("p", { className: ScTableListMobile_default.roleText, children: role }) }),
-          /* @__PURE__ */ jsxs55("div", { className: ScTableListMobile_default.accessInfo, children: [
+          /* @__PURE__ */ jsxs56("div", { className: ScTableListMobile_default.accessInfo, children: [
             accessIcons && accessIcons.length > 0 && /* @__PURE__ */ jsx65("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ jsx65("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
             permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ jsx65("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ jsx65("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
           ] })
@@ -4659,7 +4824,7 @@ var ScWorkspaceSwitchMobile_default = {
 };
 
 // src/SC-workspaceSwitch-Mobile/ScWorkspaceSwitchMobile.tsx
-import { jsx as jsx66, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
 var ScWorkspaceSwitchMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -4672,22 +4837,22 @@ var ScWorkspaceSwitchMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs57(
     "div",
     {
       className: ScWorkspaceSwitchMobile_default.scWorkspaceSwitchMobile + " " + ScWorkspaceSwitchMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
+        /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
             /* @__PURE__ */ jsx66("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ jsx66("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
             /* @__PURE__ */ jsx66("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
           ] }),
           /* @__PURE__ */ jsx66("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ jsx66("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
         ] }),
         /* @__PURE__ */ jsx66("div", { className: ScWorkspaceSwitchMobile_default.divider }),
-        /* @__PURE__ */ jsxs56("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
+        /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
           /* @__PURE__ */ jsx66("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ jsx66("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
           /* @__PURE__ */ jsx66("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
         ] })
@@ -4716,7 +4881,7 @@ var ScWorkspaceSettingsMobile_default = {
 };
 
 // src/SC-workspaceSettings-Mobile/ScWorkspaceSettingsMobile.tsx
-import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
 var ScWorkspaceSettingsMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -4731,26 +4896,26 @@ var ScWorkspaceSettingsMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs58(
     "div",
     {
       className: ScWorkspaceSettingsMobile_default.scWorkspaceSettingsMobile + " " + ScWorkspaceSettingsMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
+        /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
             /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ jsx67("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
             /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
           ] }),
           /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
         ] }),
         /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSettingsMobile_default.divider }),
-        /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+        /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
           /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ jsx67("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
           /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
         ] }),
-        /* @__PURE__ */ jsxs57("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+        /* @__PURE__ */ jsxs58("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
           /* @__PURE__ */ jsx67("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ jsx67("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
           /* @__PURE__ */ jsx67("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
         ] })
@@ -4775,7 +4940,7 @@ var ScMobileTopNav_default = {
 };
 
 // src/SC-MobileTopNav/ScMobileTopNav.tsx
-import { Fragment as Fragment20, jsx as jsx68, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
 var ScMobileTopNav = ({
   type = "home",
   searchIcon = false,
@@ -4798,20 +4963,20 @@ var ScMobileTopNav = ({
 }) => {
   const hasBorder = type === "chat" || type === "inApp";
   const showSearch = type === "inApp" && searchIcon && search;
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     "div",
     {
       className: ScMobileTopNav_default.scMobileTopNav + " " + (hasBorder ? ScMobileTopNav_default.withBorder : "") + " " + className,
       ...props,
       children: [
         type === "home" && /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-        type === "chat" && /* @__PURE__ */ jsxs58(Fragment20, { children: [
+        type === "chat" && /* @__PURE__ */ jsxs59(Fragment21, { children: [
           /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
           /* @__PURE__ */ jsx68("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
           /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        showSearch && /* @__PURE__ */ jsxs58(Fragment20, { children: [
-          /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ jsxs58("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
+        showSearch && /* @__PURE__ */ jsxs59(Fragment21, { children: [
+          /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ jsxs59("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
             /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
             /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ jsx68(
               "input",
@@ -4826,7 +4991,7 @@ var ScMobileTopNav = ({
           ] }) }),
           /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        type === "inApp" && !search && /* @__PURE__ */ jsxs58(Fragment20, { children: [
+        type === "inApp" && !search && /* @__PURE__ */ jsxs59(Fragment21, { children: [
           /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
           /* @__PURE__ */ jsx68("p", { className: ScMobileTopNav_default.heading, children: heading }),
           /* @__PURE__ */ jsx68(
@@ -4888,7 +5053,7 @@ var ScPopUpMenu_default = {
 };
 
 // src/SC-PopUpMenu/ScPopUpMenu.tsx
-import { jsx as jsx70, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs60 } from "react/jsx-runtime";
 var ScPopUpMenu = ({
   menu = "Options",
   state = "default",
@@ -4897,7 +5062,7 @@ var ScPopUpMenu = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs60(
     "div",
     {
       className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
@@ -4931,7 +5096,7 @@ var ScReferralCardMobile_default = {
 };
 
 // src/SC-referralCard-Mobile/ScReferralCardMobile.tsx
-import { jsx as jsx71, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs61 } from "react/jsx-runtime";
 var ScReferralCardMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -4944,17 +5109,17 @@ var ScReferralCardMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs60("div", { className: ScReferralCardMobile_default.userRow, children: [
-          /* @__PURE__ */ jsxs60("div", { className: ScReferralCardMobile_default.profileSection, children: [
+        /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.userRow, children: [
+          /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.profileSection, children: [
             /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx71("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
-            /* @__PURE__ */ jsxs60("div", { className: ScReferralCardMobile_default.userInfo, children: [
+            /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.userInfo, children: [
               /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.userName, children: name }),
               /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.userEmail, children: email })
             ] })
@@ -4962,7 +5127,7 @@ var ScReferralCardMobile = ({
           /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
         ] }),
         /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.divider }),
-        /* @__PURE__ */ jsxs60("div", { className: ScReferralCardMobile_default.detailsRow, children: [
+        /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.detailsRow, children: [
           /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.dateText, children: date }),
           /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
         ] })
@@ -4971,89 +5136,69 @@ var ScReferralCardMobile = ({
   );
 };
 
-// src/SC-InvoiceHistory-Mobile/ScInvoiceHistoryMobile.module.css
-var ScInvoiceHistoryMobile_default = {
-  scInvoiceHistoryMobile: "ScInvoiceHistoryMobile_scInvoiceHistoryMobile",
-  invoiceInfo: "ScInvoiceHistoryMobile_invoiceInfo",
-  invoiceNumber: "ScInvoiceHistoryMobile_invoiceNumber",
-  date: "ScInvoiceHistoryMobile_date",
-  amount: "ScInvoiceHistoryMobile_amount"
+// src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.module.css
+var InvoiceHistoryMobile_default = {
+  invoiceHistoryMobile: "InvoiceHistoryMobile_invoiceHistoryMobile",
+  info: "InvoiceHistoryMobile_info",
+  invoiceId: "InvoiceHistoryMobile_invoiceId",
+  date: "InvoiceHistoryMobile_date",
+  amount: "InvoiceHistoryMobile_amount"
 };
 
-// src/SC-InvoiceHistory-Mobile/ScInvoiceHistoryMobile.tsx
-import { jsx as jsx72, jsxs as jsxs61 } from "react/jsx-runtime";
-var ScInvoiceHistoryMobile = ({
-  invoiceNumber = "# INV-2800-2026",
+// src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.tsx
+import { jsx as jsx72, jsxs as jsxs62 } from "react/jsx-runtime";
+var InvoiceHistoryMobile = ({
+  invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
   amount = "$320.89",
-  onClick,
-  className,
-  ...props
+  className
 }) => {
-  return /* @__PURE__ */ jsxs61(
-    "div",
-    {
-      className: ScInvoiceHistoryMobile_default.scInvoiceHistoryMobile + " " + className,
-      onClick,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs61("div", { className: ScInvoiceHistoryMobile_default.invoiceInfo, children: [
-          /* @__PURE__ */ jsx72("p", { className: ScInvoiceHistoryMobile_default.invoiceNumber, children: invoiceNumber }),
-          /* @__PURE__ */ jsx72("p", { className: ScInvoiceHistoryMobile_default.date, children: date })
-        ] }),
-        /* @__PURE__ */ jsx72("p", { className: ScInvoiceHistoryMobile_default.amount, children: amount })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs62("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsxs62("div", { className: InvoiceHistoryMobile_default.info, children: [
+      /* @__PURE__ */ jsx72("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
+      /* @__PURE__ */ jsx72("div", { className: InvoiceHistoryMobile_default.date, children: date })
+    ] }),
+    /* @__PURE__ */ jsx72("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
+  ] });
 };
 
-// src/SC-UsageHistory-Mobile/ScUsageHistoryMobile.module.css
-var ScUsageHistoryMobile_default = {
-  scUsageHistoryMobile: "ScUsageHistoryMobile_scUsageHistoryMobile",
-  topRow: "ScUsageHistoryMobile_topRow",
-  title: "ScUsageHistoryMobile_title",
-  usageCount: "ScUsageHistoryMobile_usageCount",
-  bottomRow: "ScUsageHistoryMobile_bottomRow",
-  metaInfo: "ScUsageHistoryMobile_metaInfo",
-  metaText: "ScUsageHistoryMobile_metaText",
-  vDivider: "ScUsageHistoryMobile_vDivider",
-  totalCount: "ScUsageHistoryMobile_totalCount"
-};
-
-// src/SC-UsageHistory-Mobile/ScUsageHistoryMobile.tsx
-import { jsx as jsx73, jsxs as jsxs62 } from "react/jsx-runtime";
-var ScUsageHistoryMobile = ({
-  title = "Artifax Generation",
-  usageCount = "50",
+// src/SC-UsageHistoryMobile/UsageHistoryMobile.module.css
+var UsageHistoryMobile_default = {
+  usageHistoryMobile: "UsageHistoryMobile_usageHistoryMobile",
+  row1: "UsageHistoryMobile_row1",
+  serviceName: "UsageHistoryMobile_serviceName",
+  credits: "UsageHistoryMobile_credits",
+  row2: "UsageHistoryMobile_row2",
+  metaLeft: "UsageHistoryMobile_metaLeft",
+  metaText: "UsageHistoryMobile_metaText",
+  divider: "UsageHistoryMobile_divider",
+  balance: "UsageHistoryMobile_balance"
+};
+
+// src/SC-UsageHistoryMobile/UsageHistoryMobile.tsx
+import { jsx as jsx73, jsxs as jsxs63 } from "react/jsx-runtime";
+var UsageHistoryMobile = ({
+  serviceName = "Artifax Generation",
+  credits = "50",
   userName = "Rohan",
   date = "Nov 9th, 2025",
-  totalCount = "84,902",
-  onClick,
-  className,
-  ...props
+  balance = "84,902",
+  className
 }) => {
-  return /* @__PURE__ */ jsxs62(
-    "div",
-    {
-      className: ScUsageHistoryMobile_default.scUsageHistoryMobile + " " + className,
-      onClick,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs62("div", { className: ScUsageHistoryMobile_default.topRow, children: [
-          /* @__PURE__ */ jsx73("p", { className: ScUsageHistoryMobile_default.title, children: title }),
-          /* @__PURE__ */ jsx73("p", { className: ScUsageHistoryMobile_default.usageCount, children: usageCount })
-        ] }),
-        /* @__PURE__ */ jsxs62("div", { className: ScUsageHistoryMobile_default.bottomRow, children: [
-          /* @__PURE__ */ jsxs62("div", { className: ScUsageHistoryMobile_default.metaInfo, children: [
-            /* @__PURE__ */ jsx73("p", { className: ScUsageHistoryMobile_default.metaText, children: userName }),
-            /* @__PURE__ */ jsx73("div", { className: ScUsageHistoryMobile_default.vDivider }),
-            /* @__PURE__ */ jsx73("p", { className: ScUsageHistoryMobile_default.metaText, children: date })
-          ] }),
-          /* @__PURE__ */ jsx73("p", { className: ScUsageHistoryMobile_default.totalCount, children: totalCount })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.row1, children: [
+      /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
+      /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.credits, children: credits })
+    ] }),
+    /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.row2, children: [
+      /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.metaLeft, children: [
+        /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
+        /* @__PURE__ */ jsx73("div", { className: UsageHistoryMobile_default.divider }),
+        /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.metaText, children: date })
+      ] }),
+      /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.balance, children: balance })
+    ] })
+  ] });
 };
 
 // src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.module.css
@@ -5061,26 +5206,25 @@ var ScWorkspaceSwitchMobileV2_default = {
   scWorkspaceSwitchMobileV2: "ScWorkspaceSwitchMobileV2_scWorkspaceSwitchMobileV2",
   "type-currentWS": "ScWorkspaceSwitchMobileV2_type-currentWS",
   "type-otherWS": "ScWorkspaceSwitchMobileV2_type-otherWS",
+  "type-display": "ScWorkspaceSwitchMobileV2_type-display",
   workspaceInfo: "ScWorkspaceSwitchMobileV2_workspaceInfo",
   dpContainer: "ScWorkspaceSwitchMobileV2_dpContainer",
-  dp: "ScWorkspaceSwitchMobileV2_dp",
-  "dp-currentWS": "ScWorkspaceSwitchMobileV2_dp-currentWS",
-  "dp-otherWS": "ScWorkspaceSwitchMobileV2_dp-otherWS",
-  dpText: "ScWorkspaceSwitchMobileV2_dpText",
   textContainer: "ScWorkspaceSwitchMobileV2_textContainer",
   wsName: "ScWorkspaceSwitchMobileV2_wsName",
   userDetails: "ScWorkspaceSwitchMobileV2_userDetails",
   roleText: "ScWorkspaceSwitchMobileV2_roleText",
+  roleMember: "ScWorkspaceSwitchMobileV2_roleMember",
   dot: "ScWorkspaceSwitchMobileV2_dot",
   planText: "ScWorkspaceSwitchMobileV2_planText",
   ownerText: "ScWorkspaceSwitchMobileV2_ownerText"
 };
 
 // src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.tsx
-import { jsx as jsx74, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs64 } from "react/jsx-runtime";
 var ScWorkspaceSwitchMobileV2 = ({
   wsName = "Workspace name is kepler",
   initials = "WS",
+  imageUrl,
   role = "Admin",
   plan = "Free",
   ownerId = "rohan@streamoid.com",
@@ -5095,12 +5239,25 @@ var ScWorkspaceSwitchMobileV2 = ({
       className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
       onClick,
       ...props,
-      children: /* @__PURE__ */ jsxs63("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
-        /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dp + " " + ScWorkspaceSwitchMobileV2_default["dp-" + type], children: /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.dpText, children: initials }) }) }),
-        /* @__PURE__ */ jsxs63("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
+      children: /* @__PURE__ */ jsxs64("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
+        /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ jsx74(
+          ScDp,
+          {
+            type: imageUrl ? "image" : "initial",
+            variant: "workspace",
+            initial: initials,
+            imageUrl,
+            size: 60,
+            style: {
+              borderRadius: "var(--radius-xl, 12px)",
+              ...type === "currentWS" && !imageUrl ? { background: "var(--alias-fill-neutral-neutralactive, #313131)" } : {}
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs64("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
           /* @__PURE__ */ jsx74("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
-          /* @__PURE__ */ jsxs63("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
-            /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.roleText, children: role }),
+          /* @__PURE__ */ jsxs64("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
+            /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
             /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
             /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
             /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
@@ -5111,7 +5268,247 @@ var ScWorkspaceSwitchMobileV2 = ({
     }
   );
 };
+
+// src/SC-imageField/ScImageField.tsx
+import { useRef as useRef3 } from "react";
+
+// src/SC-imageField/ScImageField.module.css
+var ScImageField_default = {
+  scImageField: "ScImageField_scImageField",
+  labelContainer: "ScImageField_labelContainer",
+  label: "ScImageField_label",
+  uploadArea: "ScImageField_uploadArea",
+  uploadIcon: "ScImageField_uploadIcon",
+  uploadText: "ScImageField_uploadText",
+  previewArea: "ScImageField_previewArea",
+  previewImage: "ScImageField_previewImage",
+  fileName: "ScImageField_fileName",
+  removeIcon: "ScImageField_removeIcon"
+};
+
+// src/SC-imageField/ScImageField.tsx
+import { SiconUpload as SiconUpload2, SiconDelete as SiconDelete2 } from "@streamoid/icons";
+import { jsx as jsx75, jsxs as jsxs65 } from "react/jsx-runtime";
+var ScImageField = ({
+  label = "Label",
+  imagePreview,
+  imageName,
+  onFileSelect,
+  onRemove,
+  className
+}) => {
+  const inputRef = useRef3(null);
+  const hasImage = !!imagePreview;
+  function handleClick() {
+    if (!hasImage) {
+      inputRef.current?.click();
+    }
+  }
+  function handleChange(e) {
+    const file = e.target.files?.[0];
+    if (file) {
+      onFileSelect?.(file);
+    }
+    e.target.value = "";
+  }
+  return /* @__PURE__ */ jsxs65("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsx75(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx75("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ jsx75("div", { className: ScImageField_default.label, children: label }) }),
+    hasImage ? /* @__PURE__ */ jsxs65("div", { className: ScImageField_default.previewArea, children: [
+      /* @__PURE__ */ jsx75(
+        "img",
+        {
+          className: ScImageField_default.previewImage,
+          src: imagePreview,
+          alt: "preview"
+        }
+      ),
+      /* @__PURE__ */ jsx75("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
+      /* @__PURE__ */ jsx75(
+        SiconDelete2,
+        {
+          className: ScImageField_default.removeIcon,
+          color: "var(--alias-text-and-icons-error, #d11a1a)",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove?.();
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs65("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
+      /* @__PURE__ */ jsx75(SiconUpload2, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
+      /* @__PURE__ */ jsx75("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
+    ] })
+  ] });
+};
+
+// src/SC-settingsTabComp/ScSettingsTabComp.module.css
+var ScSettingsTabComp_default = {
+  scSettingsTabComp: "ScSettingsTabComp_scSettingsTabComp",
+  tabText: "ScSettingsTabComp_tabText",
+  "active-true": "ScSettingsTabComp_active-true",
+  "active-false": "ScSettingsTabComp_active-false"
+};
+
+// src/SC-settingsTabComp/ScSettingsTabComp.tsx
+import { jsx as jsx76 } from "react/jsx-runtime";
+var ScSettingsTabComp = ({
+  tabName = "Tab",
+  active = false,
+  onClick,
+  className
+}) => {
+  const variantsClassName = ScSettingsTabComp_default["active-" + active];
+  return /* @__PURE__ */ jsx76(
+    "div",
+    {
+      className: ScSettingsTabComp_default.scSettingsTabComp + " " + variantsClassName + " " + (className ?? ""),
+      onClick,
+      children: /* @__PURE__ */ jsx76("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
+    }
+  );
+};
+
+// src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.module.css
+var ScCreditsUsageCardMobile_default = {
+  scCreditsUsageCardMobile: "ScCreditsUsageCardMobile_scCreditsUsageCardMobile",
+  header: "ScCreditsUsageCardMobile_header",
+  headerIcon: "ScCreditsUsageCardMobile_headerIcon",
+  headerLabel: "ScCreditsUsageCardMobile_headerLabel",
+  divider: "ScCreditsUsageCardMobile_divider",
+  usageInfo: "ScCreditsUsageCardMobile_usageInfo",
+  usageText: "ScCreditsUsageCardMobile_usageText",
+  remainingText: "ScCreditsUsageCardMobile_remainingText",
+  scButtonInstance: "ScCreditsUsageCardMobile_scButtonInstance"
+};
+
+// src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.tsx
+import { SiconCredits as SiconCredits3 } from "@streamoid/icons";
+import { jsx as jsx77, jsxs as jsxs66 } from "react/jsx-runtime";
+var ScCreditsUsageCardMobile = ({
+  usageLabel = "Credits usage",
+  usageText = "8,450 / 30,000",
+  remainingText = "21,550 (60%) Remaining",
+  buyButtonText = "Buy credits",
+  onBuyClick,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs66("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ jsxs66("div", { className: ScCreditsUsageCardMobile_default.header, children: [
+      /* @__PURE__ */ jsx77(
+        SiconCredits3,
+        {
+          className: ScCreditsUsageCardMobile_default.headerIcon,
+          color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
+        }
+      ),
+      /* @__PURE__ */ jsx77("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
+    ] }),
+    /* @__PURE__ */ jsx77("div", { className: ScCreditsUsageCardMobile_default.divider }),
+    /* @__PURE__ */ jsxs66("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
+      /* @__PURE__ */ jsx77("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
+      /* @__PURE__ */ jsx77("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
+    ] }),
+    /* @__PURE__ */ jsx77(
+      ScButton,
+      {
+        text: buyButtonText,
+        variant: "secondary",
+        size: "md",
+        className: ScCreditsUsageCardMobile_default.scButtonInstance,
+        onClick: onBuyClick
+      }
+    )
+  ] });
+};
+
+// src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.module.css
+var ScPlanDetailsCardMobile_default = {
+  scPlanDetailsCardMobile: "ScPlanDetailsCardMobile_scPlanDetailsCardMobile",
+  planHeader: "ScPlanDetailsCardMobile_planHeader",
+  headerLeft: "ScPlanDetailsCardMobile_headerLeft",
+  headerIcon: "ScPlanDetailsCardMobile_headerIcon",
+  headerLabel: "ScPlanDetailsCardMobile_headerLabel",
+  divider: "ScPlanDetailsCardMobile_divider",
+  planInfo: "ScPlanDetailsCardMobile_planInfo",
+  planNameRow: "ScPlanDetailsCardMobile_planNameRow",
+  planName: "ScPlanDetailsCardMobile_planName",
+  dot: "ScPlanDetailsCardMobile_dot",
+  planPrice: "ScPlanDetailsCardMobile_planPrice",
+  scBadgesInstance: "ScPlanDetailsCardMobile_scBadgesInstance",
+  scButtonInstance: "ScPlanDetailsCardMobile_scButtonInstance"
+};
+
+// src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.tsx
+import { SiconBilling as SiconBilling4 } from "@streamoid/icons";
+import { jsx as jsx78, jsxs as jsxs67 } from "react/jsx-runtime";
+var ScPlanDetailsCardMobile = ({
+  planName = "Pro",
+  planCredits = "30,000 credits",
+  planPrice = "$0.00 / month",
+  badgeText = "Active",
+  currentPlanLabel = "Current plan",
+  upgradeButtonText = "Upgrade",
+  onUpgrade,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
+      /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
+        /* @__PURE__ */ jsx78(
+          SiconBilling4,
+          {
+            className: ScPlanDetailsCardMobile_default.headerIcon,
+            color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
+          }
+        ),
+        /* @__PURE__ */ jsx78("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
+      ] }),
+      /* @__PURE__ */ jsx78(
+        ScBadges,
+        {
+          text: badgeText,
+          variant: "success",
+          styleVariant: "opaque",
+          className: ScPlanDetailsCardMobile_default.scBadgesInstance
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx78("div", { className: ScPlanDetailsCardMobile_default.divider }),
+    /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
+      /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
+        /* @__PURE__ */ jsx78("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
+        /* @__PURE__ */ jsx78("div", { className: ScPlanDetailsCardMobile_default.dot }),
+        /* @__PURE__ */ jsx78("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
+      ] }),
+      /* @__PURE__ */ jsx78("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
+    ] }),
+    /* @__PURE__ */ jsx78(
+      ScButton,
+      {
+        text: upgradeButtonText,
+        variant: "primary",
+        size: "md",
+        className: ScPlanDetailsCardMobile_default.scButtonInstance,
+        style: { backgroundImage: "linear-gradient(154deg, rgb(18, 57, 255) 0%, rgb(73, 206, 255) 100%)" },
+        onClick: onUpgrade
+      }
+    )
+  ] });
+};
 export {
+  InvoiceHistoryMobile,
   NscWorkspaceSwitch,
   ScAccess,
   ScAppCard,
@@ -5130,13 +5527,14 @@ export {
   ScCheckField,
   ScCheckbox,
   ScCreditsUsageCard,
+  ScCreditsUsageCardMobile,
   ScDp,
   ScFieldButton,
   ScGoogleSignIn,
   ScHDivider,
   ScHeader,
+  ScImageField,
   ScIntialProfileCover,
-  ScInvoiceHistoryMobile,
   ScLogoUnit,
   ScMenuOptions,
   ScMobileBottomAction,
@@ -5148,6 +5546,7 @@ export {
   ScPhtogenixInvite,
   ScPlanCard,
   ScPlanDetailsCard,
+  ScPlanDetailsCardMobile,
   ScPopUpMenu,
   ScProfile,
   ScProfileImageUpdate,
@@ -5163,6 +5562,7 @@ export {
   ScRole,
   ScRoleMobile,
   ScSettingsNav,
+  ScSettingsTabComp,
   ScSidebar,
   ScSidebarIcons,
   ScSidebarMenu,
@@ -5177,7 +5577,6 @@ export {
   ScTableListMobile,
   ScTextField,
   ScToggleSwitch,
-  ScUsageHistoryMobile,
   ScVDivider,
   ScVersion,
   ScWorkspaceCard,
@@ -5186,5 +5585,6 @@ export {
   ScWorkspaceSwitchMobile,
   ScWorkspaceSwitchMobileV2,
   StreamoidSidebar,
-  StreamoidWorkspaceSwitcher
+  StreamoidWorkspaceSwitcher,
+  UsageHistoryMobile
 };