@streamoid/ui 0.2.5 → 0.2.7

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,13 +39,14 @@ __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,
-  ScInvoiceHistoryMobile: () => ScInvoiceHistoryMobile,
   ScLogoUnit: () => ScLogoUnit,
   ScMenuOptions: () => ScMenuOptions,
   ScMobileBottomAction: () => ScMobileBottomAction,
@@ -56,6 +58,7 @@ __export(index_exports, {
   ScPhtogenixInvite: () => ScPhtogenixInvite,
   ScPlanCard: () => ScPlanCard,
   ScPlanDetailsCard: () => ScPlanDetailsCard,
+  ScPlanDetailsCardMobile: () => ScPlanDetailsCardMobile,
   ScPopUpMenu: () => ScPopUpMenu,
   ScProfile: () => ScProfile,
   ScProfileImageUpdate: () => ScProfileImageUpdate,
@@ -71,6 +74,7 @@ __export(index_exports, {
   ScRole: () => ScRole,
   ScRoleMobile: () => ScRoleMobile,
   ScSettingsNav: () => ScSettingsNav,
+  ScSettingsTabComp: () => ScSettingsTabComp,
   ScSidebar: () => ScSidebar,
   ScSidebarIcons: () => ScSidebarIcons,
   ScSidebarMenu: () => ScSidebarMenu,
@@ -85,7 +89,6 @@ __export(index_exports, {
   ScTableListMobile: () => ScTableListMobile,
   ScTextField: () => ScTextField,
   ScToggleSwitch: () => ScToggleSwitch,
-  ScUsageHistoryMobile: () => ScUsageHistoryMobile,
   ScVDivider: () => ScVDivider,
   ScVersion: () => ScVersion,
   ScWorkspaceCard: () => ScWorkspaceCard,
@@ -94,7 +97,8 @@ __export(index_exports, {
   ScWorkspaceSwitchMobile: () => ScWorkspaceSwitchMobile,
   ScWorkspaceSwitchMobileV2: () => ScWorkspaceSwitchMobileV2,
   StreamoidSidebar: () => StreamoidSidebar,
-  StreamoidWorkspaceSwitcher: () => StreamoidWorkspaceSwitcher
+  StreamoidWorkspaceSwitcher: () => StreamoidWorkspaceSwitcher,
+  UsageHistoryMobile: () => UsageHistoryMobile
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -414,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" }) })
     }
   );
 };
@@ -451,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,
@@ -467,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,
@@ -1609,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",
@@ -1616,6 +1634,7 @@ var ScProfileImageUpdate_default = {
   buttonContainer: "ScProfileImageUpdate_buttonContainer",
   scButtonInstance: "ScProfileImageUpdate_scButtonInstance",
   scVDividerInstance: "ScProfileImageUpdate_scVDividerInstance",
+  profileInitials: "ScProfileImageUpdate_profileInitials",
   siconUploadInstance: "ScProfileImageUpdate_siconUploadInstance",
   siconDeleteInstance: "ScProfileImageUpdate_siconDeleteInstance"
 };
@@ -1657,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
@@ -1994,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",
@@ -2008,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"
 };
 
@@ -2018,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,
@@ -2026,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",
     {
@@ -2047,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 })
@@ -2690,6 +2752,7 @@ function StreamoidSidebar({
   profile,
   versionText = "v1.0.0",
   toggleIcon,
+  hideFooter = false,
   className,
   style
 }) {
@@ -2707,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)"
             },
@@ -2796,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)"
                     },
@@ -2829,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",
@@ -2984,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",
@@ -3055,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)";
@@ -3246,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();
@@ -3474,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)" })
+      ] })
     }
   );
 };
@@ -3528,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",
     {
@@ -3549,7 +3603,8 @@ var ScArtifaxInvite = ({
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           ScToggleSwitch,
           {
-            active: "false",
+            checked: isEnabled,
+            onToggle,
             className: ScArtifaxInvite_default.scToggleSwitchInstance
           }
         )
@@ -3578,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",
     {
@@ -3598,7 +3656,8 @@ var ScPhtogenixInvite = ({
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           ScToggleSwitch,
           {
-            active: "false",
+            checked: isEnabled,
+            onToggle,
             className: ScPhtogenixInvite_default.scToggleSwitchInstance
           }
         )
@@ -3650,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];
@@ -3660,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 })
       ] })
     }
@@ -3682,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",
     {
@@ -3704,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,
               " "
             ] })
           ] }),
@@ -3726,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,
               {
@@ -3775,7 +3882,7 @@ var ScCatalogixInvite = ({
                 className: ScCatalogixInvite_default.scPairtextInstance
               }
             )
-          ] })
+          ] }) })
         ] }) })
       ]
     }
@@ -3787,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: [
@@ -3798,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 }),
@@ -3813,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
         }
@@ -3886,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: [
@@ -3893,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,
         {
@@ -3910,7 +4050,7 @@ var ScCheckField = ({
           className: ScCheckField_default.scPairtextInstance
         }
       )
-    ] })
+    ] }) })
   ] });
 };
 
@@ -4182,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: [
@@ -4189,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 })
   ] });
 };
 
@@ -4454,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
@@ -4495,7 +4664,7 @@ function ScWorkspaceSwitchCard({
   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";
@@ -4589,7 +4758,7 @@ function ScWorkspaceSwitchCard({
             )
           }
         ),
-        isHover && isOther && !isAdmin && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        isHover && !isAdmin && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {
             className: ScWorkspaceSwitchCard_default.leaveBtn,
@@ -5061,89 +5230,69 @@ var ScReferralCardMobile = ({
   );
 };
 
-// src/SC-InvoiceHistory-Mobile/ScInvoiceHistoryMobile.module.css
-var ScInvoiceHistoryMobile_default = {
-  scInvoiceHistoryMobile: "ScInvoiceHistoryMobile_scInvoiceHistoryMobile",
-  invoiceInfo: "ScInvoiceHistoryMobile_invoiceInfo",
-  invoiceNumber: "ScInvoiceHistoryMobile_invoiceNumber",
-  date: "ScInvoiceHistoryMobile_date",
-  amount: "ScInvoiceHistoryMobile_amount"
+// src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.module.css
+var InvoiceHistoryMobile_default = {
+  invoiceHistoryMobile: "InvoiceHistoryMobile_invoiceHistoryMobile",
+  info: "InvoiceHistoryMobile_info",
+  invoiceId: "InvoiceHistoryMobile_invoiceId",
+  date: "InvoiceHistoryMobile_date",
+  amount: "InvoiceHistoryMobile_amount"
 };
 
-// src/SC-InvoiceHistory-Mobile/ScInvoiceHistoryMobile.tsx
+// src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var ScInvoiceHistoryMobile = ({
-  invoiceNumber = "# INV-2800-2026",
+var InvoiceHistoryMobile = ({
+  invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
   amount = "$320.89",
-  onClick,
-  className,
-  ...props
+  className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
-    "div",
-    {
-      className: ScInvoiceHistoryMobile_default.scInvoiceHistoryMobile + " " + className,
-      onClick,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: ScInvoiceHistoryMobile_default.invoiceInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: ScInvoiceHistoryMobile_default.invoiceNumber, children: invoiceNumber }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: ScInvoiceHistoryMobile_default.date, children: date })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: ScInvoiceHistoryMobile_default.amount, children: amount })
-      ]
-    }
-  );
+  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-UsageHistory-Mobile/ScUsageHistoryMobile.module.css
-var ScUsageHistoryMobile_default = {
-  scUsageHistoryMobile: "ScUsageHistoryMobile_scUsageHistoryMobile",
-  topRow: "ScUsageHistoryMobile_topRow",
-  title: "ScUsageHistoryMobile_title",
-  usageCount: "ScUsageHistoryMobile_usageCount",
-  bottomRow: "ScUsageHistoryMobile_bottomRow",
-  metaInfo: "ScUsageHistoryMobile_metaInfo",
-  metaText: "ScUsageHistoryMobile_metaText",
-  vDivider: "ScUsageHistoryMobile_vDivider",
-  totalCount: "ScUsageHistoryMobile_totalCount"
+// src/SC-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-UsageHistory-Mobile/ScUsageHistoryMobile.tsx
+// src/SC-UsageHistoryMobile/UsageHistoryMobile.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var ScUsageHistoryMobile = ({
-  title = "Artifax Generation",
-  usageCount = "50",
+var UsageHistoryMobile = ({
+  serviceName = "Artifax Generation",
+  credits = "50",
   userName = "Rohan",
   date = "Nov 9th, 2025",
-  totalCount = "84,902",
-  onClick,
-  className,
-  ...props
+  balance = "84,902",
+  className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-    "div",
-    {
-      className: ScUsageHistoryMobile_default.scUsageHistoryMobile + " " + className,
-      onClick,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: ScUsageHistoryMobile_default.topRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: ScUsageHistoryMobile_default.title, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: ScUsageHistoryMobile_default.usageCount, children: usageCount })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: ScUsageHistoryMobile_default.bottomRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: ScUsageHistoryMobile_default.metaInfo, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: ScUsageHistoryMobile_default.metaText, children: userName }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: ScUsageHistoryMobile_default.vDivider }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: ScUsageHistoryMobile_default.metaText, children: date })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: ScUsageHistoryMobile_default.totalCount, children: totalCount })
-        ] })
-      ]
-    }
-  );
+  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
@@ -5151,16 +5300,14 @@ var ScWorkspaceSwitchMobileV2_default = {
   scWorkspaceSwitchMobileV2: "ScWorkspaceSwitchMobileV2_scWorkspaceSwitchMobileV2",
   "type-currentWS": "ScWorkspaceSwitchMobileV2_type-currentWS",
   "type-otherWS": "ScWorkspaceSwitchMobileV2_type-otherWS",
+  "type-display": "ScWorkspaceSwitchMobileV2_type-display",
   workspaceInfo: "ScWorkspaceSwitchMobileV2_workspaceInfo",
   dpContainer: "ScWorkspaceSwitchMobileV2_dpContainer",
-  dp: "ScWorkspaceSwitchMobileV2_dp",
-  "dp-currentWS": "ScWorkspaceSwitchMobileV2_dp-currentWS",
-  "dp-otherWS": "ScWorkspaceSwitchMobileV2_dp-otherWS",
-  dpText: "ScWorkspaceSwitchMobileV2_dpText",
   textContainer: "ScWorkspaceSwitchMobileV2_textContainer",
   wsName: "ScWorkspaceSwitchMobileV2_wsName",
   userDetails: "ScWorkspaceSwitchMobileV2_userDetails",
   roleText: "ScWorkspaceSwitchMobileV2_roleText",
+  roleMember: "ScWorkspaceSwitchMobileV2_roleMember",
   dot: "ScWorkspaceSwitchMobileV2_dot",
   planText: "ScWorkspaceSwitchMobileV2_planText",
   ownerText: "ScWorkspaceSwitchMobileV2_ownerText"
@@ -5171,6 +5318,7 @@ 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",
@@ -5186,11 +5334,24 @@ var ScWorkspaceSwitchMobileV2 = ({
       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)("div", { className: ScWorkspaceSwitchMobileV2_default.dp + " " + ScWorkspaceSwitchMobileV2_default["dp-" + type], children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.dpText, children: initials }) }) }),
+        /* @__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, children: role }),
+            /* @__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 }),
@@ -5201,3 +5362,242 @@ var ScWorkspaceSwitchMobileV2 = ({
     }
   );
 };
+
+// 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
+      }
+    )
+  ] });
+};