@streamoid/ui 0.2.4 → 0.2.6

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  InvoiceHistoryMobile: () => InvoiceHistoryMobile,
   NscWorkspaceSwitch: () => NscWorkspaceSwitch,
   ScAccess: () => ScAccess,
   ScAppCard: () => ScAppCard,
@@ -38,14 +39,18 @@ __export(index_exports, {
   ScCheckField: () => ScCheckField,
   ScCheckbox: () => ScCheckbox,
   ScCreditsUsageCard: () => ScCreditsUsageCard,
+  ScCreditsUsageCardMobile: () => ScCreditsUsageCardMobile,
   ScDp: () => ScDp,
   ScFieldButton: () => ScFieldButton,
   ScGoogleSignIn: () => ScGoogleSignIn,
   ScHDivider: () => ScHDivider,
   ScHeader: () => ScHeader,
+  ScImageField: () => ScImageField,
   ScIntialProfileCover: () => ScIntialProfileCover,
   ScLogoUnit: () => ScLogoUnit,
   ScMenuOptions: () => ScMenuOptions,
+  ScMobileBottomAction: () => ScMobileBottomAction,
+  ScMobileTopNav: () => ScMobileTopNav,
   ScOnlyField: () => ScOnlyField,
   ScOnlyIcon: () => ScOnlyIcon,
   ScPairtext: () => ScPairtext,
@@ -53,17 +58,23 @@ __export(index_exports, {
   ScPhtogenixInvite: () => ScPhtogenixInvite,
   ScPlanCard: () => ScPlanCard,
   ScPlanDetailsCard: () => ScPlanDetailsCard,
+  ScPlanDetailsCardMobile: () => ScPlanDetailsCardMobile,
+  ScPopUpMenu: () => ScPopUpMenu,
   ScProfile: () => ScProfile,
   ScProfileImageUpdate: () => ScProfileImageUpdate,
   ScProfileOptions: () => ScProfileOptions,
   ScProfileSettingsComp: () => ScProfileSettingsComp,
+  ScProfileV2Mobile: () => ScProfileV2Mobile,
   ScProgressBar: () => ScProgressBar,
   ScQuickPrompt: () => ScQuickPrompt,
   ScRadio: () => ScRadio,
+  ScReferralCardMobile: () => ScReferralCardMobile,
   ScReferralTableHeader: () => ScReferralTableHeader,
   ScReferralTableList: () => ScReferralTableList,
   ScRole: () => ScRole,
+  ScRoleMobile: () => ScRoleMobile,
   ScSettingsNav: () => ScSettingsNav,
+  ScSettingsTabComp: () => ScSettingsTabComp,
   ScSidebar: () => ScSidebar,
   ScSidebarIcons: () => ScSidebarIcons,
   ScSidebarMenu: () => ScSidebarMenu,
@@ -75,14 +86,19 @@ __export(index_exports, {
   ScTabSwitcher: () => ScTabSwitcher,
   ScTableHeader: () => ScTableHeader,
   ScTableList: () => ScTableList,
+  ScTableListMobile: () => ScTableListMobile,
   ScTextField: () => ScTextField,
   ScToggleSwitch: () => ScToggleSwitch,
   ScVDivider: () => ScVDivider,
   ScVersion: () => ScVersion,
   ScWorkspaceCard: () => ScWorkspaceCard,
+  ScWorkspaceSettingsMobile: () => ScWorkspaceSettingsMobile,
   ScWorkspaceSwitchCard: () => ScWorkspaceSwitchCard,
+  ScWorkspaceSwitchMobile: () => ScWorkspaceSwitchMobile,
+  ScWorkspaceSwitchMobileV2: () => ScWorkspaceSwitchMobileV2,
   StreamoidSidebar: () => StreamoidSidebar,
-  StreamoidWorkspaceSwitcher: () => StreamoidWorkspaceSwitcher
+  StreamoidWorkspaceSwitcher: () => StreamoidWorkspaceSwitcher,
+  UsageHistoryMobile: () => UsageHistoryMobile
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -402,32 +418,29 @@ var ScCheckbox_default = {
 var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: ScCheckbox_default.scCheckbox + " " + className + " " + variantsClassName,
+      style: { cursor: "pointer", ...props.style },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "svg",
-        {
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "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__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: "24", height: "24", rx: "6", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M7.5 12L10.5 15L16.5 9", stroke: "var(--alias-text---icons-inverse, #101010)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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" }) })
     }
   );
 };
@@ -439,14 +452,21 @@ var ScPairtext = ({
   icon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons3.SiconHome, { className: ScPairtext_default.siconHomeInstance }),
   iconPosition = "left",
   type = "icon",
+  checked,
+  onChange,
   className,
   ...props
 }) => {
   const variantsClassName = ScPairtext_default["icon-position-" + iconPosition] + " " + ScPairtext_default["type-" + type];
+  const derivedState = checked !== void 0 ? checked ? "selected" : "default" : "default";
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: ScPairtext_default.scPairtext + " " + className + " " + variantsClassName,
+      style: { cursor: "pointer" },
+      onClick: (e) => {
+        onChange?.(!checked);
+      },
       children: [
         iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ScPairtext_default.content, children: [
           content,
@@ -455,11 +475,18 @@ var ScPairtext = ({
         type === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ScCheckbox,
           {
-            state: "default",
+            state: derivedState,
+            checked,
             className: ScPairtext_default.scCheckboxInstance
           }
         ) }),
-        type === "radio" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScRadio, { state: "default", className: ScPairtext_default.scRadioInstance }) }),
+        type === "radio" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ScRadio,
+          {
+            state: derivedState,
+            className: ScPairtext_default.scRadioInstance
+          }
+        ) }),
         type === "icon" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: icon }),
         iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ScPairtext_default.content, children: [
           content,
@@ -1597,6 +1624,9 @@ var ScProfile = ({
   );
 };
 
+// src/SC-Profile Image update/ScProfileImageUpdate.tsx
+var import_react5 = require("react");
+
 // src/SC-Profile Image update/ScProfileImageUpdate.module.css
 var ScProfileImageUpdate_default = {
   scProfileImageUpdate: "ScProfileImageUpdate_scProfileImageUpdate",
@@ -1604,6 +1634,7 @@ var ScProfileImageUpdate_default = {
   buttonContainer: "ScProfileImageUpdate_buttonContainer",
   scButtonInstance: "ScProfileImageUpdate_scButtonInstance",
   scVDividerInstance: "ScProfileImageUpdate_scVDividerInstance",
+  profileInitials: "ScProfileImageUpdate_profileInitials",
   siconUploadInstance: "ScProfileImageUpdate_siconUploadInstance",
   siconDeleteInstance: "ScProfileImageUpdate_siconDeleteInstance"
 };
@@ -1645,32 +1676,62 @@ var ScVDivider = ({
 // src/SC-Profile Image update/ScProfileImageUpdate.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var ScProfileImageUpdate = ({
+  imageUrl,
+  initials = "",
+  onUpload,
+  onDelete,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
+  const inputRef = (0, import_react5.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__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      ScButton,
+      "input",
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons14.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__ */ (0, import_jsx_runtime27.jsx)(ScVDivider, { className: ScProfileImageUpdate_default.scVDividerInstance }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      ScButton,
-      {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons14.SiconDelete, { className: ScProfileImageUpdate_default.siconDeleteInstance }),
-        styleVariant: "icon-only",
-        variant: "tertiary",
-        size: "md",
-        className: ScProfileImageUpdate_default.scButtonInstance
-      }
-    )
-  ] }) });
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { className: ScProfileImageUpdate_default.profileImage, src: imageUrl, alt: "profile" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: ScProfileImageUpdate_default.profileImage + " " + ScProfileImageUpdate_default.profileInitials, children: initials }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ScButton,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons14.SiconUpload, { className: ScProfileImageUpdate_default.siconUploadInstance }),
+          styleVariant: "icon-only",
+          variant: "tertiary",
+          size: "md",
+          className: ScProfileImageUpdate_default.scButtonInstance,
+          onClick: handleUploadClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScVDivider, { className: ScProfileImageUpdate_default.scVDividerInstance }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ScButton,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons14.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
@@ -1982,6 +2043,9 @@ var ScProfileSettingsComp_default = {
 // src/SC-ProfileSettingsComp/ScProfileSettingsComp.tsx
 var import_icons24 = require("@streamoid/icons");
 
+// src/SC-textField/ScTextField.tsx
+var import_react6 = require("react");
+
 // src/SC-textField/ScTextField.module.css
 var ScTextField_default = {
   scTextField: "ScTextField_scTextField",
@@ -1996,7 +2060,7 @@ 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"
 };
 
@@ -2006,7 +2070,7 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var ScTextField = ({
   tfRightIcon = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons23.SiconBolt, { className: ScTextField_default.siconBoltInstance }),
   tfLeftIcon = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons23.SiconBolt, { className: ScTextField_default.siconBoltInstance }),
-  state = "default",
+  state,
   tfGroup = "icon-right",
   labelGroup = "",
   className,
@@ -2014,7 +2078,9 @@ var ScTextField = ({
   label = "",
   ...props
 }) => {
-  const variantsClassName = ScTextField_default["state-" + state] + " " + ScTextField_default["tf-group-" + tfGroup] + " " + ScTextField_default["label-group-" + labelGroup];
+  const [focused, setFocused] = (0, import_react6.useState)(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__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
@@ -2035,7 +2101,15 @@ var ScTextField = ({
             {
               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__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: tfRightIcon })
@@ -2678,6 +2752,7 @@ function StreamoidSidebar({
   profile,
   versionText = "v1.0.0",
   toggleIcon,
+  hideFooter = false,
   className,
   style
 }) {
@@ -2695,6 +2770,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)"
             },
@@ -2784,6 +2860,7 @@ function StreamoidSidebar({
                     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)"
                     },
@@ -2817,9 +2894,12 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {})
+                !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: "var(--spacing-md)" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {})
+                ] })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                 "div",
                 {
                   className: "flex items-center w-full",
@@ -2972,7 +3052,7 @@ function StreamoidSidebar({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HDivider, {})
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            !hideFooter && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
               "div",
               {
                 className: "shrink-0 flex flex-col items-center",
@@ -3043,7 +3123,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_icons34 = require("@streamoid/icons");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var PRIMARY_ICON = "var(--alias-text---icons-primary)";
@@ -3234,12 +3314,12 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = (0, import_react5.useRef)(null);
+  const modalRef = (0, import_react7.useRef)(null);
   const title = config?.title || "Switch workspace";
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -3462,48 +3542,31 @@ var ScToggleSwitch_default = {
 var import_jsx_runtime45 = require("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__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
       className: ScToggleSwitch_default.scToggleSwitch + " " + className + " " + variantsClassName,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-        "svg",
-        {
-          width: "41",
-          height: "25",
-          viewBox: "0 0 41 25",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              "path",
-              {
-                d: "M0.25 12.25C0.25 5.62258 5.62258 0.25 12.25 0.25H28.25C34.8774 0.25 40.25 5.62258 40.25 12.25C40.25 18.8774 34.8774 24.25 28.25 24.25H12.25C5.62258 24.25 0.25 18.8774 0.25 12.25Z",
-                fill: "var(--alias-fill-neutral-neutral, #1a1a1a)"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              "path",
-              {
-                d: "M40 12.25C40 5.76065 34.7393 0.5 28.25 0.5H12.25C5.76065 0.5 0.5 5.76065 0.5 12.25C0.5 18.7393 5.76065 24 12.25 24H28.25C34.7393 24 40 18.7393 40 12.25ZM40.5 12.25C40.5 19.0155 35.0155 24.5 28.25 24.5H12.25C5.48451 24.5 0 19.0155 0 12.25C0 5.48451 5.48451 0 12.25 0H28.25C35.0155 0 40.5 5.48451 40.5 12.25Z",
-                fill: "var(--alias-border-divider, #242424)"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              "path",
-              {
-                d: "M2.25 12.25C2.25 6.72715 6.72715 2.25 12.25 2.25C17.7728 2.25 22.25 6.72715 22.25 12.25C22.25 17.7728 17.7728 22.25 12.25 22.25C6.72715 22.25 2.25 17.7728 2.25 12.25Z",
-                fill: "var(--alias-fill-neutral-neutralactive, #313131)"
-              }
-            )
-          ]
-        }
-      )
+      onClick: (e) => {
+        onToggle?.(!isActive);
+        props.onClick?.(e);
+      },
+      style: { cursor: "pointer", ...props.style },
+      children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { width: "40", height: "24", viewBox: "0 0 40 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("rect", { width: "40", height: "24", rx: "12", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("circle", { cx: "28", cy: "12", r: "10", fill: "var(--alias-text---icons-inverse, #101010)" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { width: "41", height: "25", viewBox: "0 0 41 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M0.25 12.25C0.25 5.62258 5.62258 0.25 12.25 0.25H28.25C34.8774 0.25 40.25 5.62258 40.25 12.25C40.25 18.8774 34.8774 24.25 28.25 24.25H12.25C5.62258 24.25 0.25 18.8774 0.25 12.25Z", fill: "var(--alias-fill-neutral-neutral, #1a1a1a)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M40 12.25C40 5.76065 34.7393 0.5 28.25 0.5H12.25C5.76065 0.5 0.5 5.76065 0.5 12.25C0.5 18.7393 5.76065 24 12.25 24H28.25C34.7393 24 40 18.7393 40 12.25ZM40.5 12.25C40.5 19.0155 35.0155 24.5 28.25 24.5H12.25C5.48451 24.5 0 19.0155 0 12.25C0 5.48451 5.48451 0 12.25 0H28.25C35.0155 0 40.5 5.48451 40.5 12.25Z", fill: "var(--alias-border-divider, #242424)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M2.25 12.25C2.25 6.72715 6.72715 2.25 12.25 2.25C17.7728 2.25 22.25 6.72715 22.25 12.25C22.25 17.7728 17.7728 22.25 12.25 22.25C6.72715 22.25 2.25 17.7728 2.25 12.25Z", fill: "var(--alias-fill-neutral-neutralactive, #313131)" })
+      ] })
     }
   );
 };
@@ -3516,9 +3579,12 @@ var ScArtifaxInvite = ({
   appDescription = "Info about artifax",
   appIcon,
   className,
+  enabled,
+  onToggle,
   ...props
 }) => {
-  const variantsClassName = ScArtifaxInvite_default["active-" + active];
+  const isEnabled = enabled !== void 0 ? enabled : active === "true";
+  const variantsClassName = ScArtifaxInvite_default["active-" + (isEnabled ? "true" : "false")];
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
@@ -3537,7 +3603,8 @@ var ScArtifaxInvite = ({
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           ScToggleSwitch,
           {
-            active: "false",
+            checked: isEnabled,
+            onToggle,
             className: ScArtifaxInvite_default.scToggleSwitchInstance
           }
         )
@@ -3566,9 +3633,12 @@ var ScPhtogenixInvite = ({
   scAppCardappName = "Photogenix",
   scAppCardappIcon = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons38.SiconArtifacts, { className: ScPhtogenixInvite_default.siconArtifactsInstance }),
   className,
+  enabled,
+  onToggle,
   ...props
 }) => {
-  const variantsClassName = ScPhtogenixInvite_default["active-" + active];
+  const isEnabled = enabled !== void 0 ? enabled : active === "true";
+  const variantsClassName = ScPhtogenixInvite_default["active-" + (isEnabled ? "true" : "false")];
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
@@ -3586,7 +3656,8 @@ var ScPhtogenixInvite = ({
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           ScToggleSwitch,
           {
-            active: "false",
+            checked: isEnabled,
+            onToggle,
             className: ScPhtogenixInvite_default.scToggleSwitchInstance
           }
         )
@@ -3638,6 +3709,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];
@@ -3648,10 +3722,26 @@ var ScOnlyField = ({
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: ScOnlyField_default.inputContainer, children: [
         (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: tfLeftIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: ScOnlyField_default.inputText, children: [
-          placeholderFilled,
-          " "
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "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__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: tfRightIcon })
       ] })
     }
@@ -3670,9 +3760,18 @@ var ScCatalogixInvite = ({
   searchPlaceholder = "Search stores...",
   appIcon,
   className,
+  enabled,
+  onToggle,
+  stores,
+  selectedStores,
+  onStoreToggle,
+  searchValue,
+  onSearchChange,
   ...props
 }) => {
-  const variantsClassName = ScCatalogixInvite_default["active-" + active];
+  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__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
@@ -3692,19 +3791,20 @@ var ScCatalogixInvite = ({
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             ScToggleSwitch,
             {
-              active: "false",
+              checked: isEnabled,
+              onToggle,
               className: ScCatalogixInvite_default.scToggleSwitchInstance
             }
           )
         ] }),
-        active === "true" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
+        isEnabled && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
           /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
             /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
               storeAccessTitle,
               " "
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScCatalogixInvite_default.selectedCount, children: [
-              selectedCount,
+              displayCount,
               " "
             ] })
           ] }),
@@ -3714,10 +3814,29 @@ var ScCatalogixInvite = ({
               tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons41.SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
               tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons41.SiconSearch, { className: ScCatalogixInvite_default.siconSearchInstance }),
               placeholderFilled: searchPlaceholder,
+              value: searchValue,
+              onInputChange: onSearchChange,
               className: ScCatalogixInvite_default.scOnlyFieldInstance
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScCatalogixInvite_default.storeListContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: ScCatalogixInvite_default.storeListContainer, children: stores ? stores.length > 0 ? stores.map((store) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            ScPairtext,
+            {
+              content: store.name,
+              iconPosition: "right",
+              type: "checkbox",
+              checked: selectedStores?.includes(store.id),
+              onChange: () => onStoreToggle?.(store.id),
+              className: ScCatalogixInvite_default.scPairtextInstance
+            },
+            store.id
+          )) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               ScPairtext,
               {
@@ -3763,7 +3882,7 @@ var ScCatalogixInvite = ({
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             )
-          ] })
+          ] }) })
         ] }) })
       ]
     }
@@ -3775,6 +3894,17 @@ var import_jsx_runtime50 = require("react/jsx-runtime");
 var ScAppField = ({
   appFieldTitle = "App permission",
   className,
+  artifaxEnabled,
+  onArtifaxToggle,
+  photogenixEnabled,
+  onPhotogenixToggle,
+  catalogixEnabled,
+  onCatalogixToggle,
+  catalogixStores,
+  catalogixSelectedStores,
+  onCatalogixStoreToggle,
+  catalogixSearchValue,
+  onCatalogixSearchChange,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
@@ -3786,12 +3916,16 @@ var ScAppField = ({
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         ScArtifaxInvite,
         {
+          enabled: artifaxEnabled,
+          onToggle: onArtifaxToggle,
           className: ScAppField_default.scArtifaxInviteInstance
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         ScPhtogenixInvite,
         {
+          enabled: photogenixEnabled,
+          onToggle: onPhotogenixToggle,
           scAppCardappDescription: "Info about photogenix",
           scAppCardappName: "Photogenix",
           scAppCardappIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons43.SiconPhotogenix, { className: ScAppField_default.siconPhotogenixInstance }),
@@ -3801,6 +3935,13 @@ var ScAppField = ({
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         ScCatalogixInvite,
         {
+          enabled: catalogixEnabled,
+          onToggle: onCatalogixToggle,
+          stores: catalogixStores,
+          selectedStores: catalogixSelectedStores,
+          onStoreToggle: onCatalogixStoreToggle,
+          searchValue: catalogixSearchValue,
+          onSearchChange: onCatalogixSearchChange,
           active: "true",
           className: ScAppField_default.scCatalogixInviteInstance
         }
@@ -3874,6 +4015,7 @@ var import_jsx_runtime52 = require("react/jsx-runtime");
 var ScCheckField = ({
   label = "Label",
   className,
+  checkboxes,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
@@ -3881,7 +4023,17 @@ var ScCheckField = ({
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScCheckField_default.tabSwitcher, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScCheckField_default.tabSwitcher, children: checkboxes ? checkboxes.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      ScPairtext,
+      {
+        content: item.label,
+        type: "checkbox",
+        checked: item.checked,
+        onChange: item.onChange,
+        className: ScCheckField_default.scPairtextInstance
+      },
+      i
+    )) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         ScPairtext,
         {
@@ -3898,7 +4050,7 @@ var ScCheckField = ({
           className: ScCheckField_default.scPairtextInstance
         }
       )
-    ] })
+    ] }) })
   ] });
 };
 
@@ -4170,6 +4322,9 @@ var import_jsx_runtime59 = require("react/jsx-runtime");
 var ScTabField = ({
   label = "Label",
   className,
+  tabs,
+  activeTab,
+  onTabChange,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScTabField_default.scTabField + " " + className, children: [
@@ -4177,7 +4332,33 @@ var ScTabField = ({
       label,
       " "
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
+    tabs ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      ScTabSwitcher,
+      {
+        tabCount: String(tabs.length),
+        className: ScTabField_default.scTabSwitcherInstance,
+        component: tabs[0] ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          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__ */ (0, import_jsx_runtime59.jsx)(
+          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__ */ (0, import_jsx_runtime59.jsx)(ScTabSwitcher, { className: ScTabField_default.scTabSwitcherInstance })
   ] });
 };
 
@@ -4442,7 +4623,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_icons53 = require("@streamoid/icons");
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -4463,12 +4644,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
 var import_jsx_runtime63 = require("react/jsx-runtime");
-function NscWorkspaceSwitch({
+function ScWorkspaceSwitchCard({
   wsName = "Workspace name is kepler",
   role = "Admin",
   plan = "Free",
@@ -4479,9 +4661,10 @@ function NscWorkspaceSwitch({
   hover,
   className,
   onSwitch,
-  onSettings
+  onSettings,
+  onLeave
 }) {
-  const [internalHover, setInternalHover] = (0, import_react6.useState)(false);
+  const [internalHover, setInternalHover] = (0, import_react8.useState)(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -4574,9 +4757,847 @@ function NscWorkspaceSwitch({
               }
             )
           }
+        ),
+        isHover && !isAdmin && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
+          {
+            className: ScWorkspaceSwitchCard_default.leaveBtn,
+            onClick: (e) => {
+              e.stopPropagation();
+              onLeave?.();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconLogout, { 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
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var ScRoleMobile = ({
+  role = "admin",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    "div",
+    {
+      className: ScRoleMobile_default.scRoleMobile + " " + ScRoleMobile_default["role-" + role] + " " + className,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("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
+var import_jsx_runtime65 = require("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__ */ (0, import_jsx_runtime65.jsx)("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+    "div",
+    {
+      className: ScProfileV2Mobile_default.scProfileV2Mobile + " " + className,
+      ...props,
+      children: [
+        dpPosition === "left" && profileImage,
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: ScProfileV2Mobile_default.userInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: ScProfileV2Mobile_default.userName, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("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
+var import_jsx_runtime66 = require("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__ */ (0, import_jsx_runtime66.jsxs)(
+    "div",
+    {
+      className: ScTableListMobile_default.scTableListMobile + " " + className,
+      onClick: onRowClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ScTableListMobile_default.profileRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ScTableListMobile_default.userInfo, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: ScTableListMobile_default.userName, children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: ScTableListMobile_default.userEmail, children: email })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: ScTableListMobile_default.initials, children: initials }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ScTableListMobile_default.detailsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: ScTableListMobile_default.roleText, children: role }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ScTableListMobile_default.accessInfo, children: [
+            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
+            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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
+var import_jsx_runtime67 = require("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__ */ (0, import_jsx_runtime67.jsxs)(
+    "div",
+    {
+      className: ScWorkspaceSwitchMobile_default.scWorkspaceSwitchMobile + " " + ScWorkspaceSwitchMobile_default["variant-" + variant] + " " + className,
+      onClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: ScWorkspaceSwitchMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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
+var import_jsx_runtime68 = require("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__ */ (0, import_jsx_runtime68.jsxs)(
+    "div",
+    {
+      className: ScWorkspaceSettingsMobile_default.scWorkspaceSettingsMobile + " " + ScWorkspaceSettingsMobile_default["variant-" + variant] + " " + className,
+      onClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: ScWorkspaceSettingsMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("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
+var import_jsx_runtime69 = require("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__ */ (0, import_jsx_runtime69.jsxs)(
+    "div",
+    {
+      className: ScMobileTopNav_default.scMobileTopNav + " " + (hasBorder ? ScMobileTopNav_default.withBorder : "") + " " + className,
+      ...props,
+      children: [
+        type === "home" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+        type === "chat" && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+        ] }),
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              "input",
+              {
+                type: "text",
+                className: ScMobileTopNav_default.searchField,
+                placeholder: searchPlaceholder,
+                value: searchValue,
+                onChange: (e) => onSearchChange?.(e.target.value)
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+        ] }),
+        type === "inApp" && !search && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: ScMobileTopNav_default.heading, children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            "div",
+            {
+              className: ScMobileTopNav_default.iconContainer + " " + (!searchIcon ? ScMobileTopNav_default.hidden : ""),
+              onClick: onSearchClick,
+              children: searchIcon ? searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("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
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var ScMobileBottomAction = ({
+  text = "Save Changes",
+  disabled = false,
+  onClick,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    "div",
+    {
+      className: ScMobileBottomAction_default.scMobileBottomAction + " " + className,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "button",
+        {
+          className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
+          onClick,
+          disabled,
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("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
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var ScPopUpMenu = ({
+  menu = "Options",
+  state = "default",
+  icon,
+  onClick,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "div",
+    {
+      className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
+      onClick,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: ScPopUpMenu_default.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("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
+var import_jsx_runtime72 = require("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__ */ (0, import_jsx_runtime72.jsxs)(
+    "div",
+    {
+      className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
+      onClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: ScReferralCardMobile_default.userRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: ScReferralCardMobile_default.profileSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: ScReferralCardMobile_default.userInfo, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: ScReferralCardMobile_default.userName, children: name }),
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: ScReferralCardMobile_default.userEmail, children: email })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: ScReferralCardMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: ScReferralCardMobile_default.detailsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: ScReferralCardMobile_default.dateText, children: date }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("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
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var InvoiceHistoryMobile = ({
+  invoiceId = "# INV-2800-2026",
+  date = "Nov 9th, 2025",
+  amount = "$320.89",
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: InvoiceHistoryMobile_default.info, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: InvoiceHistoryMobile_default.date, children: date })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("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
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var UsageHistoryMobile = ({
+  serviceName = "Artifax Generation",
+  credits = "50",
+  userName = "Rohan",
+  date = "Nov 9th, 2025",
+  balance = "84,902",
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: UsageHistoryMobile_default.row1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: UsageHistoryMobile_default.credits, children: credits })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: UsageHistoryMobile_default.row2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: UsageHistoryMobile_default.metaLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: UsageHistoryMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: date })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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
+var import_jsx_runtime75 = require("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__ */ (0, import_jsx_runtime75.jsx)(
+    "div",
+    {
+      className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
+      onClick,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          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__ */ (0, import_jsx_runtime75.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/SC-imageField/ScImageField.tsx
+var import_react9 = require("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
+var import_icons54 = require("@streamoid/icons");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var ScImageField = ({
+  label = "Label",
+  imagePreview,
+  imageName,
+  onFileSelect,
+  onRemove,
+  className
+}) => {
+  const inputRef = (0, import_react9.useRef)(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__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: ScImageField_default.label, children: label }) }),
+    hasImage ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ScImageField_default.previewArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "img",
+        {
+          className: ScImageField_default.previewImage,
+          src: imagePreview,
+          alt: "preview"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        import_icons54.SiconDelete,
+        {
+          className: ScImageField_default.removeIcon,
+          color: "var(--alias-text-and-icons-error, #d11a1a)",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove?.();
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_icons54.SiconUpload, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("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
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var ScSettingsTabComp = ({
+  tabName = "Tab",
+  active = false,
+  onClick,
+  className
+}) => {
+  const variantsClassName = ScSettingsTabComp_default["active-" + active];
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    "div",
+    {
+      className: ScSettingsTabComp_default.scSettingsTabComp + " " + variantsClassName + " " + (className ?? ""),
+      onClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("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
+var import_icons55 = require("@streamoid/icons");
+var import_jsx_runtime78 = require("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__ */ (0, import_jsx_runtime78.jsxs)("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: ScCreditsUsageCardMobile_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        import_icons55.SiconCredits,
+        {
+          className: ScCreditsUsageCardMobile_default.headerIcon,
+          color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: ScCreditsUsageCardMobile_default.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      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
+var import_icons56 = require("@streamoid/icons");
+var import_jsx_runtime79 = require("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__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          import_icons56.SiconBilling,
+          {
+            className: ScPlanDetailsCardMobile_default.headerIcon,
+            color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        ScBadges,
+        {
+          text: badgeText,
+          variant: "success",
+          styleVariant: "opaque",
+          className: ScPlanDetailsCardMobile_default.scBadgesInstance
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: ScPlanDetailsCardMobile_default.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: ScPlanDetailsCardMobile_default.dot }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      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
+      }
+    )
+  ] });
+};