@streamoid/ui 0.5.0 → 0.5.2

package/dist/index.mjs

@@ -397,7 +397,7 @@ var ScPairtext = ({
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ScBillingHistoryTableList = ({
   invoiceNumber = "# INV-2800-2026",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   date = "Nov 9th, 2025",
   downloadLabel = "Download invoice",
   className,
@@ -466,7 +466,7 @@ var ScButton_default = {
 
 // src/SC-Button/ScButton.tsx
 import { SiconHome as SiconHome2 } from "@streamoid/icons";
-import { useMemo, isValidElement, cloneElement } from "react";
+import { useState, useEffect, isValidElement, cloneElement } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 if (typeof window !== "undefined" && CSS.registerProperty) {
   const props = [
@@ -527,8 +527,12 @@ var ScButton = ({
   className,
   ...props
 }) => {
-  const noiseUrl = useMemo(() => {
-    if (typeof window === "undefined" || variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") return "";
+  const [noiseUrl, setNoiseUrl] = useState("");
+  useEffect(() => {
+    if (variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") {
+      setNoiseUrl("");
+      return;
+    }
     const size2 = 128;
     const canvas = document.createElement("canvas");
     canvas.width = size2;
@@ -543,7 +547,7 @@ var ScButton = ({
       imageData.data[i + 3] = 255;
     }
     ctx.putImageData(imageData, 0, 0);
-    return canvas.toDataURL("image/png");
+    setNoiseUrl(canvas.toDataURL("image/png"));
   }, [variant, type, state]);
   const strokeWidth = size === "sm" ? 1.25 : 1.5;
   const styledIcon = isValidElement(icon) ? cloneElement(icon, { color: "currentColor", strokeWidth }) : icon;
@@ -788,7 +792,7 @@ var ScCalendar = ({
 };
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 
 // src/SC-Credits usage card/ScCreditsUsageCard.module.css
 var ScCreditsUsageCard_default = {
@@ -846,7 +850,7 @@ var ScCreditsUsageCard = ({
   className,
   ...props
 }) => {
-  const [btnHovered, setBtnHovered] = useState(false);
+  const [btnHovered, setBtnHovered] = useState2(false);
   const displayText = btnHovered && buyButtonHoverText ? buyButtonHoverText : buyButtonText;
   return /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
     /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.header, children: [
@@ -901,7 +905,7 @@ var ScCreditsUsageCard = ({
 };
 
 // src/SC-CreditWarningBanner/CreditWarningBanner.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { SiconClose } from "@streamoid/icons";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var STYLES = {
@@ -967,7 +971,7 @@ function CreditWarningBanner({
   expanded = true,
   onCollapsedClick
 }) {
-  const [dismissed, setDismissed] = useState2(false);
+  const [dismissed, setDismissed] = useState3(false);
   if (dismissed) return null;
   const { bg, border, color } = STYLES[level];
   if (!expanded) {
@@ -1085,7 +1089,7 @@ function CreditWarningBanner({
 }
 
 // src/SC-Dp/ScDp.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/SC-Dp/ScDp.module.css
 var ScDp_default = {
@@ -1110,7 +1114,7 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = useState3(false);
+  const [imageFailed, setImageFailed] = useState4(false);
   const isProfile = variant === "profile";
   const showImage = type === "image" && imageUrl && !imageFailed;
   const containerClass = [
@@ -1469,7 +1473,7 @@ import { SiconCredits as SiconCredits2, SiconHome as SiconHome4 } from "@streamo
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var ScPlanCard = ({
   planName = "Pro",
-  price = "$49.99 / month",
+  price = "\u20B949.99 / month",
   credits = "30,000 Credits",
   type = "free",
   features = [],
@@ -1565,7 +1569,14 @@ var ScPlanCard = ({
           /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ jsx23(SiconHome4, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ jsx23(
+                SiconHome4,
+                {
+                  color: "var(--alias-text-and-icons-tertiary, #9e9e9e)",
+                  size: 24,
+                  strokeWidth: 1.5
+                }
+              ),
               /* @__PURE__ */ jsx23("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -1591,7 +1602,10 @@ var ScPlanDetailsCard_default = {
   scPlanDetailsCard: "ScPlanDetailsCard_scPlanDetailsCard",
   planHeader: "ScPlanDetailsCard_planHeader",
   scPairtextInstance: "ScPlanDetailsCard_scPairtextInstance",
+  badgeGroup: "ScPlanDetailsCard_badgeGroup",
   scBadgesInstance: "ScPlanDetailsCard_scBadgesInstance",
+  badgeDot: "ScPlanDetailsCard_badgeDot",
+  badgeSubText: "ScPlanDetailsCard_badgeSubText",
   scHDividerInstance: "ScPlanDetailsCard_scHDividerInstance",
   planDetails: "ScPlanDetailsCard_planDetails",
   planInfo: "ScPlanDetailsCard_planInfo",
@@ -1599,20 +1613,29 @@ var ScPlanDetailsCard_default = {
   planName: "ScPlanDetailsCard_planName",
   dotSeparator: "ScPlanDetailsCard_dotSeparator",
   planPrice: "ScPlanDetailsCard_planPrice",
-  scButtonInstance: "ScPlanDetailsCard_scButtonInstance"
+  scButtonInstance: "ScPlanDetailsCard_scButtonInstance",
+  skeletonPill: "ScPlanDetailsCard_skeletonPill",
+  skeletonShimmer: "ScPlanDetailsCard_skeletonShimmer",
+  badgeSkeleton: "ScPlanDetailsCard_badgeSkeleton",
+  planNameSkeleton: "ScPlanDetailsCard_planNameSkeleton",
+  creditsSkeleton: "ScPlanDetailsCard_creditsSkeleton",
+  priceSkeleton: "ScPlanDetailsCard_priceSkeleton",
+  buttonSkeleton: "ScPlanDetailsCard_buttonSkeleton"
 };
 
 // src/SC-Plan details card/ScPlanDetailsCard.tsx
 import { SiconBilling } from "@streamoid/icons";
 import { SiconHome as SiconHome5 } from "@streamoid/icons";
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var ScPlanDetailsCard = ({
   planName = "Free",
   planCredits = "30,000 credits",
-  planPrice = "$0.00 / month",
+  planPrice = "\u20B90.00 / month",
   badgeText = "Active",
+  badgeSubText,
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
+  isLoading = false,
   onUpgrade,
   className,
   ...props
@@ -1627,27 +1650,39 @@ var ScPlanDetailsCard = ({
           className: ScPlanDetailsCard_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ jsx24(
-        ScBadges,
-        {
-          text: badgeText,
-          variant: "success",
-          styleVariant: "opaque",
-          className: ScPlanDetailsCard_default.scBadgesInstance
-        }
-      )
+      /* @__PURE__ */ jsx24("div", { className: ScPlanDetailsCard_default.badgeGroup, children: isLoading ? /* @__PURE__ */ jsx24("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.badgeSkeleton}` }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
+        /* @__PURE__ */ jsx24(
+          ScBadges,
+          {
+            text: badgeText,
+            variant: "success",
+            styleVariant: "opaque",
+            className: ScPlanDetailsCard_default.scBadgesInstance
+          }
+        ),
+        badgeSubText && /* @__PURE__ */ jsxs19(Fragment6, { children: [
+          /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.badgeDot }),
+          /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.badgeSubText, children: badgeSubText })
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx24(ScHDivider, { className: ScPlanDetailsCard_default.scHDividerInstance }),
     /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planDetails, children: [
-      /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planInfo, children: [
+      /* @__PURE__ */ jsx24("div", { className: ScPlanDetailsCard_default.planInfo, children: isLoading ? /* @__PURE__ */ jsxs19(Fragment6, { children: [
+        /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planNameRow, "aria-label": "Loading plan details", children: [
+          /* @__PURE__ */ jsx24("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.planNameSkeleton}` }),
+          /* @__PURE__ */ jsx24("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.creditsSkeleton}` })
+        ] }),
+        /* @__PURE__ */ jsx24("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.priceSkeleton}` })
+      ] }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
         /* @__PURE__ */ jsxs19("div", { className: ScPlanDetailsCard_default.planNameRow, children: [
           /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.planName, children: planName }),
           /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.dotSeparator }),
           /* @__PURE__ */ jsx24("span", { className: ScPlanDetailsCard_default.planName, children: planCredits })
         ] }),
         /* @__PURE__ */ jsx24("div", { className: ScPlanDetailsCard_default.planPrice, children: planPrice })
-      ] }),
-      /* @__PURE__ */ jsx24(
+      ] }) }),
+      isLoading ? /* @__PURE__ */ jsx24("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.buttonSkeleton}` }) : /* @__PURE__ */ jsx24(
         ScButton,
         {
           icon: /* @__PURE__ */ jsx24(SiconHome5, { className: ScPlanDetailsCard_default.siconHomeInstance }),
@@ -1672,7 +1707,7 @@ var ScProfile_default = {
 };
 
 // src/SC-Profile/ScProfile.tsx
-import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var ScProfile = ({
   name = "Chris Hemsworth",
   subText = "Kepler workspace",
@@ -1689,7 +1724,7 @@ var ScProfile = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx25("img", { className: ScProfile_default.profileImage, src: profileImage }),
-        collapsed === "false" && /* @__PURE__ */ jsx25(Fragment6, { children: /* @__PURE__ */ jsxs20("div", { className: ScProfile_default.userInfo, children: [
+        collapsed === "false" && /* @__PURE__ */ jsx25(Fragment7, { children: /* @__PURE__ */ jsxs20("div", { className: ScProfile_default.userInfo, children: [
           /* @__PURE__ */ jsxs20("div", { className: ScProfile_default.userName, children: [
             name,
             " "
@@ -1838,7 +1873,7 @@ var ScWorkspace_default = {
 };
 
 // src/SC-Workspace/ScWorkspace.tsx
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var ScWorkspace = ({
   collapsed = "false",
   workspaceName = "Kepler",
@@ -1855,7 +1890,7 @@ var ScWorkspace = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx28("img", { className: ScWorkspace_default.profileImage, src: profileImage }),
-        collapsed === "false" && /* @__PURE__ */ jsx28(Fragment7, { children: /* @__PURE__ */ jsxs22("div", { className: ScWorkspace_default.userInfo, children: [
+        collapsed === "false" && /* @__PURE__ */ jsx28(Fragment8, { children: /* @__PURE__ */ jsxs22("div", { className: ScWorkspace_default.userInfo, children: [
           /* @__PURE__ */ jsxs22("div", { className: ScWorkspace_default.userName, children: [
             workspaceName,
             " "
@@ -1889,7 +1924,7 @@ var ScTabComp_default = {
 
 // src/SC-tabComp/ScTabComp.tsx
 import { SiconHome as SiconHome6 } from "@streamoid/icons";
-import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var ScTabComp = ({
   icon = /* @__PURE__ */ jsx29(SiconHome6, { className: ScTabComp_default.siconHomeInstance }),
   active = "false",
@@ -1905,8 +1940,8 @@ var ScTabComp = ({
       className: ScTabComp_default.scTabComp + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        type === "icon-only" && /* @__PURE__ */ jsx29(Fragment8, { children: /* @__PURE__ */ jsx29("div", { className: ScTabComp_default.icon, children: icon }) }),
-        type === "text-only" && /* @__PURE__ */ jsx29(Fragment8, { children: /* @__PURE__ */ jsx29("div", { className: ScTabComp_default.textContainer, children: /* @__PURE__ */ jsxs23("div", { className: ScTabComp_default.tabText, children: [
+        type === "icon-only" && /* @__PURE__ */ jsx29(Fragment9, { children: /* @__PURE__ */ jsx29("div", { className: ScTabComp_default.icon, children: icon }) }),
+        type === "text-only" && /* @__PURE__ */ jsx29(Fragment9, { children: /* @__PURE__ */ jsx29("div", { className: ScTabComp_default.textContainer, children: /* @__PURE__ */ jsxs23("div", { className: ScTabComp_default.tabText, children: [
           text,
           " "
         ] }) }) })
@@ -1927,7 +1962,7 @@ var ScTabSwitcher_default = {
 
 // src/SC-tabSwitcher/ScTabSwitcher.tsx
 import { SiconHome as SiconHome7 } from "@streamoid/icons";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var ScTabSwitcher = ({
   tabCount = "2",
   component,
@@ -1936,6 +1971,9 @@ var ScTabSwitcher = ({
   component4,
   component5,
   className,
+  scTabCompicon: _scTabCompicon,
+  scTabCompactive: _scTabCompactive,
+  scTabComptype: _scTabComptype,
   ...props
 }) => {
   const variantsClassName = ScTabSwitcher_default["tab-count-" + tabCount];
@@ -1960,21 +1998,21 @@ var ScTabSwitcher = ({
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ),
-        (tabCount === "3" || tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx30(Fragment9, { children: component3 ? component3 : /* @__PURE__ */ jsx30(
+        (tabCount === "3" || tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx30(Fragment10, { children: component3 ? component3 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
             icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ) }),
-        (tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx30(Fragment9, { children: component4 ? component4 : /* @__PURE__ */ jsx30(
+        (tabCount === "4" || tabCount === "5") && /* @__PURE__ */ jsx30(Fragment10, { children: component4 ? component4 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
             icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
             className: ScTabSwitcher_default.scTabCompInstance
           }
         ) }),
-        tabCount === "5" && /* @__PURE__ */ jsx30(Fragment9, { children: component5 ? component5 : /* @__PURE__ */ jsx30(
+        tabCount === "5" && /* @__PURE__ */ jsx30(Fragment10, { children: component5 ? component5 : /* @__PURE__ */ jsx30(
           ScTabComp,
           {
             icon: /* @__PURE__ */ jsx30(SiconHome7, { className: ScTabSwitcher_default.siconHomeInstance }),
@@ -2116,7 +2154,7 @@ var ScProfileSettingsComp_default = {
 import { SiconBolt as SiconBolt3, SiconLock } from "@streamoid/icons";
 
 // src/SC-textField/ScTextField.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/SC-textField/ScTextField.module.css
 var ScTextField_default = {
@@ -2138,7 +2176,7 @@ var ScTextField_default = {
 
 // src/SC-textField/ScTextField.tsx
 import { SiconBolt as SiconBolt2 } from "@streamoid/icons";
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var ScTextField = ({
   tfRightIcon = /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
   tfLeftIcon = /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }),
@@ -2151,7 +2189,7 @@ var ScTextField = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = useState4(false);
+  const [focused, setFocused] = useState5(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__ */ jsxs26(
@@ -2165,11 +2203,11 @@ var ScTextField = ({
             label,
             " "
           ] }),
-          labelGroup === "text" && /* @__PURE__ */ jsx32(Fragment10, { children: /* @__PURE__ */ jsx32("div", { className: ScTextField_default.info, children: "info " }) }),
-          labelGroup === "icon" && /* @__PURE__ */ jsx32(Fragment10, { children: /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }) })
+          labelGroup === "text" && /* @__PURE__ */ jsx32(Fragment11, { children: /* @__PURE__ */ jsx32("div", { className: ScTextField_default.info, children: "info " }) }),
+          labelGroup === "icon" && /* @__PURE__ */ jsx32(Fragment11, { children: /* @__PURE__ */ jsx32(SiconBolt2, { className: ScTextField_default.siconBoltInstance }) })
         ] }),
         /* @__PURE__ */ jsxs26("div", { className: ScTextField_default.inputContainer, children: [
-          (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx32(Fragment10, { children: tfLeftIcon }),
+          (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx32(Fragment11, { children: tfLeftIcon }),
           /* @__PURE__ */ jsx32(
             "input",
             {
@@ -2186,7 +2224,7 @@ var ScTextField = ({
               }
             }
           ),
-          (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx32(Fragment10, { children: tfRightIcon })
+          (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ jsx32(Fragment11, { children: tfRightIcon })
         ] })
       ]
     }
@@ -2325,7 +2363,7 @@ var ScSidebarMenu_default = {
 
 // src/SC-Sidebar menu/ScSidebarMenu.tsx
 import { SiconHome as SiconHome9 } from "@streamoid/icons";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 var ScSidebarMenu = ({
   icon = /* @__PURE__ */ jsx35(SiconHome9, { className: ScSidebarMenu_default.siconHomeInstance }),
   state = "default",
@@ -2344,7 +2382,7 @@ var ScSidebarMenu = ({
       ...props,
       children: [
         icon,
-        variant === "expanded" && /* @__PURE__ */ jsxs29(Fragment11, { children: [
+        variant === "expanded" && /* @__PURE__ */ jsxs29(Fragment12, { children: [
           /* @__PURE__ */ jsx35("div", { className: ScSidebarMenu_default.content, children: text }),
           moreIcon && /* @__PURE__ */ jsx35(
             "div",
@@ -2435,7 +2473,7 @@ var ScVersion_default = {
 
 // src/SC-version/ScVersion.tsx
 import { SiconCollapse } from "@streamoid/icons";
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var ScVersion = ({
   state = "expanded",
   version = "v2.1.2",
@@ -2451,7 +2489,7 @@ var ScVersion = ({
       className: ScVersion_default.scVersion + " " + className + " " + variantsClassName,
       ...props,
       children: [
-        state === "collapsed" && /* @__PURE__ */ jsx38(Fragment12, { children: /* @__PURE__ */ jsx38("div", { className: ScVersion_default.icon, children: component ? component : /* @__PURE__ */ jsx38(
+        state === "collapsed" && /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsx38("div", { className: ScVersion_default.icon, children: component ? component : /* @__PURE__ */ jsx38(
           ScSidebarIcons,
           {
             instance: scSidebarIconsinstance || /* @__PURE__ */ jsx38(SiconCollapse, { className: ScVersion_default.siconCollapseInstance }),
@@ -2462,7 +2500,7 @@ var ScVersion = ({
           version,
           " "
         ] }),
-        state === "expanded" && /* @__PURE__ */ jsx38(Fragment12, { children: /* @__PURE__ */ jsx38(
+        state === "expanded" && /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsx38(
           ScSidebarIcons,
           {
             instance: /* @__PURE__ */ jsx38(SiconCollapse, { className: ScVersion_default.siconCollapseInstance }),
@@ -2476,7 +2514,7 @@ var ScVersion = ({
 };
 
 // src/SC-Sidebar/ScSidebar.tsx
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var ScSidebar = ({
   state = "expanded",
   className,
@@ -2489,7 +2527,7 @@ var ScSidebar = ({
     {
       className: ScSidebar_default.scSidebar + " " + className + " " + variantsClassName,
       children: [
-        state === "collapsed" && /* @__PURE__ */ jsx39(Fragment13, { children: /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedContainer, children: [
+        state === "collapsed" && /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedContainer, children: [
           /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.collapsedItems, children: [
             /* @__PURE__ */ jsx39(
               ScLogoUnit,
@@ -2631,7 +2669,7 @@ var ScSidebar = ({
             }
           )
         ] }) }),
-        state === "expanded" && /* @__PURE__ */ jsx39(Fragment13, { children: /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedContainer, children: [
+        state === "expanded" && /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedContainer, children: [
           /* @__PURE__ */ jsxs31("div", { className: ScSidebar_default.expandedItems, children: [
             /* @__PURE__ */ jsx39(ScLogoUnit, { className: ScSidebar_default.scLogoUnitInstance }),
             /* @__PURE__ */ jsx39("div", { className: ScSidebar_default.expandedItemContainer, children: /* @__PURE__ */ jsx39(
@@ -2767,7 +2805,7 @@ var ScSidebar = ({
 };
 
 // src/SC-Sidebar-new/streamoid-sidebar.tsx
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 function SectionHeader({ label }) {
   return /* @__PURE__ */ jsx40("div", { className: "opacity-50 shrink-0 w-full", children: /* @__PURE__ */ jsx40("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx40(
     "div",
@@ -2916,7 +2954,7 @@ function StreamoidSidebar({
                         }
                       ) : null
                     ] }),
-                    !!(topItems?.length || config.topItem) && /* @__PURE__ */ jsxs32(Fragment14, { children: [
+                    !!(topItems?.length || config.topItem) && /* @__PURE__ */ jsxs32(Fragment15, { children: [
                       /* @__PURE__ */ jsx40(HDivider, {}),
                       /* @__PURE__ */ jsx40(
                         "div",
@@ -2941,7 +2979,7 @@ function StreamoidSidebar({
                       ),
                       /* @__PURE__ */ jsx40(HDivider, {})
                     ] }),
-                    showBody && bodyContent ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ jsx40(Fragment14, { children: config.sections.map((section) => /* @__PURE__ */ jsxs32(
+                    showBody && bodyContent ? /* @__PURE__ */ jsx40("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ jsx40(Fragment15, { children: config.sections.map((section) => /* @__PURE__ */ jsxs32(
                       "div",
                       {
                         className: "flex flex-col items-start shrink-0 w-full",
@@ -2987,7 +3025,7 @@ function StreamoidSidebar({
                 }
               ) : null,
               /* @__PURE__ */ jsx40(HDivider, {}),
-              profile ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+              profile ? /* @__PURE__ */ jsxs32(Fragment15, { children: [
                 /* @__PURE__ */ jsxs32(
                   "div",
                   {
@@ -3027,7 +3065,7 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                !effectiveHideFooter && /* @__PURE__ */ jsx40(Fragment14, { children: /* @__PURE__ */ jsx40(HDivider, {}) })
+                !effectiveHideFooter && /* @__PURE__ */ jsx40(Fragment15, { children: /* @__PURE__ */ jsx40(HDivider, {}) })
               ] }) : null,
               !effectiveHideFooter && /* @__PURE__ */ jsx40("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx40("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs32(
                 "div",
@@ -3099,7 +3137,7 @@ function StreamoidSidebar({
                 style: { gap: "var(--spacing-xxs)" },
                 children: [
                   collapsedLogo,
-                  !!(topItems?.length || config.topItem) ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+                  !!(topItems?.length || config.topItem) ? /* @__PURE__ */ jsxs32(Fragment15, { children: [
                     /* @__PURE__ */ jsx40(HDivider, {}),
                     /* @__PURE__ */ jsx40(
                       "div",
@@ -3175,7 +3213,7 @@ function StreamoidSidebar({
               }
             ) : null,
             /* @__PURE__ */ jsx40(HDivider, {}),
-            profile ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+            profile ? /* @__PURE__ */ jsxs32(Fragment15, { children: [
               /* @__PURE__ */ jsx40(
                 "div",
                 {
@@ -3239,7 +3277,7 @@ function StreamoidSidebar({
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
 import {
   useCallback,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.module.css
@@ -3282,7 +3320,7 @@ var ScArtifaxSidebar_default = {
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
 import { SiconCollapse as SiconCollapse3, SiconDown, SiconUp } from "@streamoid/icons";
-import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 function ArtifaxPlaceholderIcon() {
   return /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: ScArtifaxSidebar_default.placeholderIcon });
 }
@@ -3290,9 +3328,9 @@ function resolveIcon2(iconMap, item, active, expanded) {
   const renderer = iconMap?.[item.iconKey];
   if (renderer == null) return /* @__PURE__ */ jsx41(ArtifaxPlaceholderIcon, {});
   if (typeof renderer === "function") {
-    return /* @__PURE__ */ jsx41(Fragment15, { children: renderer({ item, active, expanded }) });
+    return /* @__PURE__ */ jsx41(Fragment16, { children: renderer({ item, active, expanded }) });
   }
-  return /* @__PURE__ */ jsx41(Fragment15, { children: renderer });
+  return /* @__PURE__ */ jsx41(Fragment16, { children: renderer });
 }
 function resolveToggleIcon2(toggleIcon, expanded) {
   if (toggleIcon == null)
@@ -3361,7 +3399,7 @@ var ScArtifaxSidebar = ({
   style
 }) => {
   const isControlled = !!openSections;
-  const [internalOpen, setInternalOpen] = useState5(
+  const [internalOpen, setInternalOpen] = useState6(
     () => {
       const init = {};
       sections.forEach((s) => {
@@ -3734,7 +3772,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-import { useEffect, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import {
   SiconClose as SiconClose2,
   SiconTeam as SiconTeam4,
@@ -3935,7 +3973,7 @@ function StreamoidWorkspaceSwitcher({
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -4467,7 +4505,7 @@ var ScOnlyField = ({
 
 // src/SC-catalogixInvite/ScCatalogixInvite.tsx
 import { SiconHome as SiconHome10 } from "@streamoid/icons";
-import { Fragment as Fragment16, jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
 var ScCatalogixInvite = ({
   active = "false",
   appName = "Catalogix",
@@ -4514,7 +4552,7 @@ var ScCatalogixInvite = ({
             }
           )
         ] }),
-        isEnabled && /* @__PURE__ */ jsx54(Fragment16, { children: /* @__PURE__ */ jsxs46("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
+        isEnabled && /* @__PURE__ */ jsx54(Fragment17, { children: /* @__PURE__ */ jsxs46("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
           /* @__PURE__ */ jsxs46("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
             /* @__PURE__ */ jsxs46("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
               storeAccessTitle,
@@ -4553,7 +4591,7 @@ var ScCatalogixInvite = ({
             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__ */ jsxs46(Fragment16, { children: [
+          }, children: "No stores found" }) : /* @__PURE__ */ jsxs46(Fragment17, { children: [
             /* @__PURE__ */ jsx54(
               ScPairtext,
               {
@@ -4728,7 +4766,7 @@ var ScCheckField_default = {
 
 // src/SC-checkField/ScCheckField.tsx
 import { SiconHome as SiconHome11 } from "@streamoid/icons";
-import { Fragment as Fragment17, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 var ScCheckField = ({
   label = "Label",
   className,
@@ -4750,7 +4788,7 @@ var ScCheckField = ({
         className: ScCheckField_default.scPairtextInstance
       },
       i
-    )) : /* @__PURE__ */ jsxs49(Fragment17, { children: [
+    )) : /* @__PURE__ */ jsxs49(Fragment18, { children: [
       /* @__PURE__ */ jsx57(
         ScPairtext,
         {
@@ -4783,7 +4821,7 @@ var ScFieldButton_default = {
 
 // src/SC-fieldButton/ScFieldButton.tsx
 import { SiconHome as SiconHome12 } from "@streamoid/icons";
-import { Fragment as Fragment18, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 var ScFieldButton = ({
   icon = /* @__PURE__ */ jsx58(SiconHome12, { className: ScFieldButton_default.siconHomeInstance }),
   type = "default",
@@ -4799,12 +4837,12 @@ var ScFieldButton = ({
       className: ScFieldButton_default.scFieldButton + " " + className + " " + variantsClassName,
       ...props,
       children: /* @__PURE__ */ jsxs50("div", { className: ScFieldButton_default.container, children: [
-        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ jsx58(Fragment18, { children: icon }),
-        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ jsx58(Fragment18, { children: /* @__PURE__ */ jsxs50("div", { className: ScFieldButton_default.label, children: [
+        (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ jsx58(Fragment19, { children: icon }),
+        (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ jsx58(Fragment19, { children: /* @__PURE__ */ jsxs50("div", { className: ScFieldButton_default.label, children: [
           text,
           " "
         ] }) }),
-        type === "icon-left" && /* @__PURE__ */ jsx58(Fragment18, { children: icon })
+        type === "icon-left" && /* @__PURE__ */ jsx58(Fragment19, { children: icon })
       ] })
     }
   );
@@ -5092,7 +5130,7 @@ var ScTableHeader_default = {
 };
 
 // src/SC-tableHeader/ScTableHeader.tsx
-import { Fragment as Fragment19, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
 var ScTableHeader = ({
   type = "default",
   className,
@@ -5136,7 +5174,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance4
           }
         ),
-        type === "pending" && /* @__PURE__ */ jsx65(Fragment19, { children: /* @__PURE__ */ jsx65(
+        type === "pending" && /* @__PURE__ */ jsx65(Fragment20, { children: /* @__PURE__ */ jsx65(
           ScHeader,
           {
             text: "Invite action",
@@ -5144,7 +5182,7 @@ var ScTableHeader = ({
             className: ScTableHeader_default.scHeaderInstance5
           }
         ) }),
-        type === "default" && /* @__PURE__ */ jsx65(Fragment19, { children: /* @__PURE__ */ jsx65(
+        type === "default" && /* @__PURE__ */ jsx65(Fragment20, { children: /* @__PURE__ */ jsx65(
           ScHeader,
           {
             text: "Signed On",
@@ -5178,7 +5216,7 @@ var ScTableList_default = {
 // src/SC-tableList/ScTableList.tsx
 import { SiconArtifacts as SiconArtifacts6, SiconPhotogenix as SiconPhotogenix3 } from "@streamoid/icons";
 import { SiconUserAdd, SiconCoins } from "@streamoid/icons";
-import { Fragment as Fragment20, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
 var ScTableList = ({
   invitedBy = "Rohan",
   signedOn = "Nov 9th, 2025",
@@ -5228,13 +5266,13 @@ var ScTableList = ({
           invitedBy,
           " "
         ] }),
-        variant === "pending" && /* @__PURE__ */ jsx66(Fragment20, { children: /* @__PURE__ */ jsx66(
+        variant === "pending" && /* @__PURE__ */ jsx66(Fragment21, { children: /* @__PURE__ */ jsx66(
           ScPendingAction,
           {
             className: ScTableList_default.scPendingActionInstance
           }
         ) }),
-        variant === "active" && /* @__PURE__ */ jsx66(Fragment20, { children: /* @__PURE__ */ jsxs58("div", { className: ScTableList_default.date, children: [
+        variant === "active" && /* @__PURE__ */ jsx66(Fragment21, { children: /* @__PURE__ */ jsxs58("div", { className: ScTableList_default.date, children: [
           signedOn,
           " "
         ] }) })
@@ -5345,7 +5383,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3, SiconLogout as SiconLogout3 } from "@streamoid/icons";
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -5386,7 +5424,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = useState6(false);
+  const [internalHover, setInternalHover] = useState7(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -5756,7 +5794,7 @@ var ScMobileTopNav_default = {
 };
 
 // src/SC-MobileTopNav/ScMobileTopNav.tsx
-import { Fragment as Fragment21, jsx as jsx74, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx74, jsxs as jsxs65 } from "react/jsx-runtime";
 var ScMobileTopNav = ({
   type = "home",
   searchIcon = false,
@@ -5786,12 +5824,12 @@ var ScMobileTopNav = ({
       ...props,
       children: [
         type === "home" && /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-        type === "chat" && /* @__PURE__ */ jsxs65(Fragment21, { children: [
+        type === "chat" && /* @__PURE__ */ jsxs65(Fragment22, { children: [
           /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
           /* @__PURE__ */ jsx74("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
           /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        showSearch && /* @__PURE__ */ jsxs65(Fragment21, { children: [
+        showSearch && /* @__PURE__ */ jsxs65(Fragment22, { children: [
           /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ jsxs65("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
             /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
             /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ jsx74(
@@ -5807,7 +5845,7 @@ var ScMobileTopNav = ({
           ] }) }),
           /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        type === "inApp" && !search && /* @__PURE__ */ jsxs65(Fragment21, { children: [
+        type === "inApp" && !search && /* @__PURE__ */ jsxs65(Fragment22, { children: [
           /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ jsx74("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
           /* @__PURE__ */ jsx74("p", { className: ScMobileTopNav_default.heading, children: heading }),
           /* @__PURE__ */ jsx74(
@@ -5984,7 +6022,7 @@ import { jsx as jsx78, jsxs as jsxs69 } from "react/jsx-runtime";
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   className
 }) => {
   return /* @__PURE__ */ jsxs69("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
@@ -6279,20 +6317,32 @@ var ScPlanDetailsCardMobile_default = {
   planName: "ScPlanDetailsCardMobile_planName",
   dot: "ScPlanDetailsCardMobile_dot",
   planPrice: "ScPlanDetailsCardMobile_planPrice",
+  badgeGroup: "ScPlanDetailsCardMobile_badgeGroup",
   scBadgesInstance: "ScPlanDetailsCardMobile_scBadgesInstance",
-  scButtonInstance: "ScPlanDetailsCardMobile_scButtonInstance"
+  badgeDot: "ScPlanDetailsCardMobile_badgeDot",
+  badgeSubText: "ScPlanDetailsCardMobile_badgeSubText",
+  scButtonInstance: "ScPlanDetailsCardMobile_scButtonInstance",
+  skeletonPill: "ScPlanDetailsCardMobile_skeletonPill",
+  skeletonShimmer: "ScPlanDetailsCardMobile_skeletonShimmer",
+  badgeSkeleton: "ScPlanDetailsCardMobile_badgeSkeleton",
+  planNameSkeleton: "ScPlanDetailsCardMobile_planNameSkeleton",
+  creditsSkeleton: "ScPlanDetailsCardMobile_creditsSkeleton",
+  priceSkeleton: "ScPlanDetailsCardMobile_priceSkeleton",
+  buttonSkeleton: "ScPlanDetailsCardMobile_buttonSkeleton"
 };
 
 // src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.tsx
 import { SiconBilling as SiconBilling4 } from "@streamoid/icons";
-import { jsx as jsx84, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx84, jsxs as jsxs74 } from "react/jsx-runtime";
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
-  planPrice = "$0.00 / month",
+  planPrice = "\u20B90.00 / month",
   badgeText = "Active",
+  badgeSubText,
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
+  isLoading = false,
   onUpgrade,
   className,
   ...props
@@ -6309,26 +6359,38 @@ var ScPlanDetailsCardMobile = ({
         ),
         /* @__PURE__ */ jsx84("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
       ] }),
-      /* @__PURE__ */ jsx84(
-        ScBadges,
-        {
-          text: badgeText,
-          variant: "success",
-          styleVariant: "opaque",
-          className: ScPlanDetailsCardMobile_default.scBadgesInstance
-        }
-      )
+      /* @__PURE__ */ jsx84("div", { className: ScPlanDetailsCardMobile_default.badgeGroup, children: isLoading ? /* @__PURE__ */ jsx84("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.badgeSkeleton}` }) : /* @__PURE__ */ jsxs74(Fragment23, { children: [
+        /* @__PURE__ */ jsx84(
+          ScBadges,
+          {
+            text: badgeText,
+            variant: "success",
+            styleVariant: "opaque",
+            className: ScPlanDetailsCardMobile_default.scBadgesInstance
+          }
+        ),
+        badgeSubText && /* @__PURE__ */ jsxs74(Fragment23, { children: [
+          /* @__PURE__ */ jsx84("span", { className: ScPlanDetailsCardMobile_default.badgeDot }),
+          /* @__PURE__ */ jsx84("span", { className: ScPlanDetailsCardMobile_default.badgeSubText, children: badgeSubText })
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx84("div", { className: ScPlanDetailsCardMobile_default.divider }),
-    /* @__PURE__ */ jsxs74("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
+    /* @__PURE__ */ jsx84("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: isLoading ? /* @__PURE__ */ jsxs74(Fragment23, { children: [
+      /* @__PURE__ */ jsxs74("div", { className: ScPlanDetailsCardMobile_default.planNameRow, "aria-label": "Loading plan details", children: [
+        /* @__PURE__ */ jsx84("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.planNameSkeleton}` }),
+        /* @__PURE__ */ jsx84("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.creditsSkeleton}` })
+      ] }),
+      /* @__PURE__ */ jsx84("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.priceSkeleton}` })
+    ] }) : /* @__PURE__ */ jsxs74(Fragment23, { children: [
       /* @__PURE__ */ jsxs74("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
         /* @__PURE__ */ jsx84("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
         /* @__PURE__ */ jsx84("div", { className: ScPlanDetailsCardMobile_default.dot }),
         /* @__PURE__ */ jsx84("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
       ] }),
       /* @__PURE__ */ jsx84("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
-    ] }),
-    /* @__PURE__ */ jsx84(
+    ] }) }),
+    isLoading ? /* @__PURE__ */ jsx84("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.buttonSkeleton}` }) : /* @__PURE__ */ jsx84(
       ScButton,
       {
         text: upgradeButtonText,