@streamoid/ui 0.2.4 → 0.2.6

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,8 +4529,8 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState3 } from "react";
-import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3 } from "@streamoid/icons";
+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
 var ScWorkspaceSwitchCard_default = {
@@ -4385,12 +4550,13 @@ var ScWorkspaceSwitchCard_default = {
   detailValueInfo: "ScWorkspaceSwitchCard_detailValueInfo",
   detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
   vDivider: "ScWorkspaceSwitchCard_vDivider",
-  btnIcon: "ScWorkspaceSwitchCard_btnIcon"
+  btnIcon: "ScWorkspaceSwitchCard_btnIcon",
+  leaveBtn: "ScWorkspaceSwitchCard_leaveBtn"
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
-function NscWorkspaceSwitch({
+import { jsx as jsx62, jsxs as jsxs54 } from "react/jsx-runtime";
+function ScWorkspaceSwitchCard({
   wsName = "Workspace name is kepler",
   role = "Admin",
   plan = "Free",
@@ -4401,9 +4567,10 @@ function NscWorkspaceSwitch({
   hover,
   className,
   onSwitch,
-  onSettings
+  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";
@@ -4424,7 +4591,7 @@ function NscWorkspaceSwitch({
       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,
           {
@@ -4439,20 +4606,20 @@ function NscWorkspaceSwitch({
             }
           }
         ),
-        /* @__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 })
             ] })
@@ -4496,13 +4663,852 @@ function NscWorkspaceSwitch({
               }
             )
           }
+        ),
+        isHover && !isAdmin && /* @__PURE__ */ jsx62(
+          "div",
+          {
+            className: ScWorkspaceSwitchCard_default.leaveBtn,
+            onClick: (e) => {
+              e.stopPropagation();
+              onLeave?.();
+            },
+            children: /* @__PURE__ */ jsx62(SiconLogout3, { className: ScWorkspaceSwitchCard_default.btnIcon, color: "currentColor" })
+          }
         )
       ] })
     }
   );
 }
-var ScWorkspaceSwitchCard = NscWorkspaceSwitch;
+var NscWorkspaceSwitch = ScWorkspaceSwitchCard;
+
+// src/SC-Role-Mobile/ScRoleMobile.module.css
+var ScRoleMobile_default = {
+  scRoleMobile: "ScRoleMobile_scRoleMobile",
+  "role-admin": "ScRoleMobile_role-admin",
+  "role-member": "ScRoleMobile_role-member",
+  text: "ScRoleMobile_text"
+};
+
+// src/SC-Role-Mobile/ScRoleMobile.tsx
+import { jsx as jsx63 } from "react/jsx-runtime";
+var ScRoleMobile = ({
+  role = "admin",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx63(
+    "div",
+    {
+      className: ScRoleMobile_default.scRoleMobile + " " + ScRoleMobile_default["role-" + role] + " " + className,
+      ...props,
+      children: /* @__PURE__ */ jsx63("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
+    }
+  );
+};
+
+// src/SC-Profile-V2-Mobile/ScProfileV2Mobile.module.css
+var ScProfileV2Mobile_default = {
+  scProfileV2Mobile: "ScProfileV2Mobile_scProfileV2Mobile",
+  profileImage: "ScProfileV2Mobile_profileImage",
+  image: "ScProfileV2Mobile_image",
+  initials: "ScProfileV2Mobile_initials",
+  userInfo: "ScProfileV2Mobile_userInfo",
+  userName: "ScProfileV2Mobile_userName",
+  userEmail: "ScProfileV2Mobile_userEmail"
+};
+
+// src/SC-Profile-V2-Mobile/ScProfileV2Mobile.tsx
+import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
+var ScProfileV2Mobile = ({
+  name = "Chris Hemsworth",
+  email = "chris@kepler.com",
+  imageUrl,
+  dpPosition = "left",
+  className,
+  ...props
+}) => {
+  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__ */ jsxs55(
+    "div",
+    {
+      className: ScProfileV2Mobile_default.scProfileV2Mobile + " " + className,
+      ...props,
+      children: [
+        dpPosition === "left" && profileImage,
+        /* @__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 })
+        ] }),
+        dpPosition === "right" && profileImage
+      ]
+    }
+  );
+};
+
+// src/SC-tableList-mobile/ScTableListMobile.module.css
+var ScTableListMobile_default = {
+  scTableListMobile: "ScTableListMobile_scTableListMobile",
+  profileRow: "ScTableListMobile_profileRow",
+  userInfo: "ScTableListMobile_userInfo",
+  userName: "ScTableListMobile_userName",
+  userEmail: "ScTableListMobile_userEmail",
+  profileImage: "ScTableListMobile_profileImage",
+  image: "ScTableListMobile_image",
+  initials: "ScTableListMobile_initials",
+  detailsRow: "ScTableListMobile_detailsRow",
+  roleBadge: "ScTableListMobile_roleBadge",
+  roleText: "ScTableListMobile_roleText",
+  accessInfo: "ScTableListMobile_accessInfo",
+  accessGroup: "ScTableListMobile_accessGroup",
+  accessIcon: "ScTableListMobile_accessIcon"
+};
+
+// src/SC-tableList-mobile/ScTableListMobile.tsx
+import { jsx as jsx65, jsxs as jsxs56 } from "react/jsx-runtime";
+var ScTableListMobile = ({
+  name = "Chris Hemsworth",
+  email = "chris@kepler.com",
+  imageUrl,
+  role = "Admin",
+  accessIcons,
+  permissionIcons,
+  onRowClick,
+  className,
+  ...props
+}) => {
+  const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ jsxs56(
+    "div",
+    {
+      className: ScTableListMobile_default.scTableListMobile + " " + className,
+      onClick: onRowClick,
+      ...props,
+      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__ */ 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__ */ 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)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/SC-workspaceSwitch-Mobile/ScWorkspaceSwitchMobile.module.css
+var ScWorkspaceSwitchMobile_default = {
+  scWorkspaceSwitchMobile: "ScWorkspaceSwitchMobile_scWorkspaceSwitchMobile",
+  "variant-current": "ScWorkspaceSwitchMobile_variant-current",
+  "variant-other": "ScWorkspaceSwitchMobile_variant-other",
+  workspaceInfo: "ScWorkspaceSwitchMobile_workspaceInfo",
+  wsNameRow: "ScWorkspaceSwitchMobile_wsNameRow",
+  initialsBox: "ScWorkspaceSwitchMobile_initialsBox",
+  initialsText: "ScWorkspaceSwitchMobile_initialsText",
+  storeName: "ScWorkspaceSwitchMobile_storeName",
+  roleBadge: "ScWorkspaceSwitchMobile_roleBadge",
+  roleText: "ScWorkspaceSwitchMobile_roleText",
+  divider: "ScWorkspaceSwitchMobile_divider",
+  ownerRow: "ScWorkspaceSwitchMobile_ownerRow",
+  ownerIconContainer: "ScWorkspaceSwitchMobile_ownerIconContainer",
+  ownerIcon: "ScWorkspaceSwitchMobile_ownerIcon",
+  ownerText: "ScWorkspaceSwitchMobile_ownerText"
+};
+
+// src/SC-workspaceSwitch-Mobile/ScWorkspaceSwitchMobile.tsx
+import { jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
+var ScWorkspaceSwitchMobile = ({
+  storeName = "Stores",
+  initials = "WS",
+  role = "Admin",
+  ownerId = "rohan@streamoid.com",
+  currentWs = true,
+  ownerIcon,
+  className,
+  onClick,
+  ...props
+}) => {
+  const variant = currentWs ? "current" : "other";
+  return /* @__PURE__ */ jsxs57(
+    "div",
+    {
+      className: ScWorkspaceSwitchMobile_default.scWorkspaceSwitchMobile + " " + ScWorkspaceSwitchMobile_default["variant-" + variant] + " " + className,
+      onClick,
+      ...props,
+      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__ */ 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 })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/SC-workspaceSettings-Mobile/ScWorkspaceSettingsMobile.module.css
+var ScWorkspaceSettingsMobile_default = {
+  scWorkspaceSettingsMobile: "ScWorkspaceSettingsMobile_scWorkspaceSettingsMobile",
+  "variant-current": "ScWorkspaceSettingsMobile_variant-current",
+  "variant-other": "ScWorkspaceSettingsMobile_variant-other",
+  workspaceInfo: "ScWorkspaceSettingsMobile_workspaceInfo",
+  wsNameRow: "ScWorkspaceSettingsMobile_wsNameRow",
+  initialsBox: "ScWorkspaceSettingsMobile_initialsBox",
+  initialsText: "ScWorkspaceSettingsMobile_initialsText",
+  storeName: "ScWorkspaceSettingsMobile_storeName",
+  roleBadge: "ScWorkspaceSettingsMobile_roleBadge",
+  roleText: "ScWorkspaceSettingsMobile_roleText",
+  divider: "ScWorkspaceSettingsMobile_divider",
+  infoRow: "ScWorkspaceSettingsMobile_infoRow",
+  iconContainer: "ScWorkspaceSettingsMobile_iconContainer",
+  icon: "ScWorkspaceSettingsMobile_icon",
+  infoText: "ScWorkspaceSettingsMobile_infoText"
+};
+
+// src/SC-workspaceSettings-Mobile/ScWorkspaceSettingsMobile.tsx
+import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
+var ScWorkspaceSettingsMobile = ({
+  storeName = "Stores",
+  initials = "WS",
+  role = "Admin",
+  ownerId = "rohan@streamoid.com",
+  teamCount = "12 Users",
+  currentWs = true,
+  ownerIcon,
+  teamIcon,
+  className,
+  onClick,
+  ...props
+}) => {
+  const variant = currentWs ? "current" : "other";
+  return /* @__PURE__ */ jsxs58(
+    "div",
+    {
+      className: ScWorkspaceSettingsMobile_default.scWorkspaceSettingsMobile + " " + ScWorkspaceSettingsMobile_default["variant-" + variant] + " " + className,
+      onClick,
+      ...props,
+      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__ */ 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__ */ 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 })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/SC-MobileTopNav/ScMobileTopNav.module.css
+var ScMobileTopNav_default = {
+  scMobileTopNav: "ScMobileTopNav_scMobileTopNav",
+  withBorder: "ScMobileTopNav_withBorder",
+  iconContainer: "ScMobileTopNav_iconContainer",
+  iconPlaceholder: "ScMobileTopNav_iconPlaceholder",
+  hidden: "ScMobileTopNav_hidden",
+  chatTitle: "ScMobileTopNav_chatTitle",
+  heading: "ScMobileTopNav_heading",
+  searchRow: "ScMobileTopNav_searchRow",
+  searchInputContainer: "ScMobileTopNav_searchInputContainer",
+  searchInput: "ScMobileTopNav_searchInput",
+  searchField: "ScMobileTopNav_searchField"
+};
+
+// src/SC-MobileTopNav/ScMobileTopNav.tsx
+import { Fragment as Fragment21, jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
+var ScMobileTopNav = ({
+  type = "home",
+  searchIcon = false,
+  search = false,
+  heading = "Heading",
+  chatTitle = "Chat title comes here...",
+  searchPlaceholder = "Search...",
+  searchValue,
+  menuIcon,
+  searchIconElement,
+  closeIcon,
+  moreIcon,
+  onMenuClick,
+  onSearchClick,
+  onCloseClick,
+  onMoreClick,
+  onSearchChange,
+  className,
+  ...props
+}) => {
+  const hasBorder = type === "chat" || type === "inApp";
+  const showSearch = type === "inApp" && searchIcon && search;
+  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__ */ 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__ */ 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",
+              {
+                type: "text",
+                className: ScMobileTopNav_default.searchField,
+                placeholder: searchPlaceholder,
+                value: searchValue,
+                onChange: (e) => onSearchChange?.(e.target.value)
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+        ] }),
+        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(
+            "div",
+            {
+              className: ScMobileTopNav_default.iconContainer + " " + (!searchIcon ? ScMobileTopNav_default.hidden : ""),
+              onClick: onSearchClick,
+              children: searchIcon ? searchIconElement || /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ jsx68("div", { className: ScMobileTopNav_default.iconPlaceholder })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/SC-MobileBottomAction/ScMobileBottomAction.module.css
+var ScMobileBottomAction_default = {
+  scMobileBottomAction: "ScMobileBottomAction_scMobileBottomAction",
+  button: "ScMobileBottomAction_button",
+  disabled: "ScMobileBottomAction_disabled",
+  buttonText: "ScMobileBottomAction_buttonText"
+};
+
+// src/SC-MobileBottomAction/ScMobileBottomAction.tsx
+import { jsx as jsx69 } from "react/jsx-runtime";
+var ScMobileBottomAction = ({
+  text = "Save Changes",
+  disabled = false,
+  onClick,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx69(
+    "div",
+    {
+      className: ScMobileBottomAction_default.scMobileBottomAction + " " + className,
+      ...props,
+      children: /* @__PURE__ */ jsx69(
+        "button",
+        {
+          className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
+          onClick,
+          disabled,
+          children: /* @__PURE__ */ jsx69("span", { className: ScMobileBottomAction_default.buttonText, children: text })
+        }
+      )
+    }
+  );
+};
+
+// src/SC-PopUpMenu/ScPopUpMenu.module.css
+var ScPopUpMenu_default = {
+  scPopUpMenu: "ScPopUpMenu_scPopUpMenu",
+  "state-default": "ScPopUpMenu_state-default",
+  "state-clicked": "ScPopUpMenu_state-clicked",
+  icon: "ScPopUpMenu_icon",
+  menuText: "ScPopUpMenu_menuText"
+};
+
+// src/SC-PopUpMenu/ScPopUpMenu.tsx
+import { jsx as jsx70, jsxs as jsxs60 } from "react/jsx-runtime";
+var ScPopUpMenu = ({
+  menu = "Options",
+  state = "default",
+  icon,
+  onClick,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs60(
+    "div",
+    {
+      className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
+      onClick,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx70("span", { className: ScPopUpMenu_default.icon, children: icon }),
+        /* @__PURE__ */ jsx70("p", { className: ScPopUpMenu_default.menuText, children: menu })
+      ]
+    }
+  );
+};
+
+// src/SC-referralCard-Mobile/ScReferralCardMobile.module.css
+var ScReferralCardMobile_default = {
+  scReferralCardMobile: "ScReferralCardMobile_scReferralCardMobile",
+  userRow: "ScReferralCardMobile_userRow",
+  profileSection: "ScReferralCardMobile_profileSection",
+  profileImage: "ScReferralCardMobile_profileImage",
+  image: "ScReferralCardMobile_image",
+  initials: "ScReferralCardMobile_initials",
+  userInfo: "ScReferralCardMobile_userInfo",
+  userName: "ScReferralCardMobile_userName",
+  userEmail: "ScReferralCardMobile_userEmail",
+  badge: "ScReferralCardMobile_badge",
+  badgeText: "ScReferralCardMobile_badgeText",
+  divider: "ScReferralCardMobile_divider",
+  detailsRow: "ScReferralCardMobile_detailsRow",
+  dateText: "ScReferralCardMobile_dateText",
+  creditsText: "ScReferralCardMobile_creditsText"
+};
+
+// src/SC-referralCard-Mobile/ScReferralCardMobile.tsx
+import { jsx as jsx71, jsxs as jsxs61 } from "react/jsx-runtime";
+var ScReferralCardMobile = ({
+  name = "Chris Hemsworth",
+  email = "chris@kepler.com",
+  imageUrl,
+  badge = "Confirmed",
+  date = "Nov 9th, 2025",
+  credits = "+ 500",
+  onClick,
+  className,
+  ...props
+}) => {
+  const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ jsxs61(
+    "div",
+    {
+      className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
+      onClick,
+      ...props,
+      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__ */ 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 })
+            ] })
+          ] }),
+          /* @__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__ */ 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 })
+        ] })
+      ]
+    }
+  );
+};
+
+// 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-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",
+  className
+}) => {
+  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-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",
+  balance = "84,902",
+  className
+}) => {
+  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
+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",
+  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 jsxs64 } from "react/jsx-runtime";
+var ScWorkspaceSwitchMobileV2 = ({
+  wsName = "Workspace name is kepler",
+  initials = "WS",
+  imageUrl,
+  role = "Admin",
+  plan = "Free",
+  ownerId = "rohan@streamoid.com",
+  type = "currentWS",
+  onClick,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx74(
+    "div",
+    {
+      className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
+      onClick,
+      ...props,
+      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__ */ 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 }),
+            /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+
+// 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,
@@ -4521,14 +5527,18 @@ export {
   ScCheckField,
   ScCheckbox,
   ScCreditsUsageCard,
+  ScCreditsUsageCardMobile,
   ScDp,
   ScFieldButton,
   ScGoogleSignIn,
   ScHDivider,
   ScHeader,
+  ScImageField,
   ScIntialProfileCover,
   ScLogoUnit,
   ScMenuOptions,
+  ScMobileBottomAction,
+  ScMobileTopNav,
   ScOnlyField,
   ScOnlyIcon,
   ScPairtext,
@@ -4536,17 +5546,23 @@ export {
   ScPhtogenixInvite,
   ScPlanCard,
   ScPlanDetailsCard,
+  ScPlanDetailsCardMobile,
+  ScPopUpMenu,
   ScProfile,
   ScProfileImageUpdate,
   ScProfileOptions,
   ScProfileSettingsComp,
+  ScProfileV2Mobile,
   ScProgressBar,
   ScQuickPrompt,
   ScRadio,
+  ScReferralCardMobile,
   ScReferralTableHeader,
   ScReferralTableList,
   ScRole,
+  ScRoleMobile,
   ScSettingsNav,
+  ScSettingsTabComp,
   ScSidebar,
   ScSidebarIcons,
   ScSidebarMenu,
@@ -4558,12 +5574,17 @@ export {
   ScTabSwitcher,
   ScTableHeader,
   ScTableList,
+  ScTableListMobile,
   ScTextField,
   ScToggleSwitch,
   ScVDivider,
   ScVersion,
   ScWorkspaceCard,
+  ScWorkspaceSettingsMobile,
   ScWorkspaceSwitchCard,
+  ScWorkspaceSwitchMobile,
+  ScWorkspaceSwitchMobileV2,
   StreamoidSidebar,
-  StreamoidWorkspaceSwitcher
+  StreamoidWorkspaceSwitcher,
+  UsageHistoryMobile
 };