@streamoid/ui 0.5.1 → 0.5.2

package/dist/index.css

@@ -2530,10 +2530,31 @@
 .ScPlanDetailsCard_scPairtextInstance {
   flex: 1 !important;
 }
+.ScPlanDetailsCard_badgeGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 0.375rem);
+  min-width: 0;
+}
 .ScPlanDetailsCard_scBadgesInstance {
   width: 3.3125rem !important;
   align-self: unset !important;
 }
+.ScPlanDetailsCard_badgeDot {
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: var(--radius-full, 999px);
+  background: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  flex-shrink: 0;
+}
+.ScPlanDetailsCard_badgeSubText {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--text-text-sm-medium-font-family, "Inter-Medium", sans-serif);
+  font-size: var(--text-text-sm-medium-font-size, 0.875rem);
+  line-height: var(--text-text-sm-medium-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-medium-font-weight, 500);
+  white-space: nowrap;
+}
 .ScPlanDetailsCard_scHDividerInstance {
   align-self: stretch !important;
   flex-shrink: 0 !important;
@@ -2601,7 +2622,53 @@
 }
 .ScPlanDetailsCard_scButtonInstance {
   flex-shrink: 0 !important;
-  width: 7.5rem !important;
+  min-width: 7.5rem !important;
+  width: auto !important;
+}
+.ScPlanDetailsCard_skeletonPill {
+  display: block;
+  border-radius: var(--radius-full, 999px);
+  background:
+    linear-gradient(
+      90deg,
+      var(--alias-fill-neutral-neutral, #242424) 0%,
+      var(--alias-border-subtle, #333333) 45%,
+      var(--alias-fill-neutral-neutral, #242424) 90%);
+  background-size: 200% 100%;
+  animation: ScPlanDetailsCard_skeletonShimmer 1.1s ease-in-out infinite;
+}
+.ScPlanDetailsCard_badgeSkeleton {
+  width: 3.3125rem;
+  height: 1.75rem;
+}
+.ScPlanDetailsCard_planNameSkeleton {
+  width: 4.25rem;
+  height: 1.25rem;
+}
+.ScPlanDetailsCard_creditsSkeleton {
+  width: 7.5rem;
+  height: 1.25rem;
+  margin-left: var(--spacing-md, 0.5rem);
+}
+.ScPlanDetailsCard_priceSkeleton {
+  width: 5rem;
+  height: 0.875rem;
+  margin-top: 0.375rem;
+  align-self: flex-start;
+}
+.ScPlanDetailsCard_buttonSkeleton {
+  flex-shrink: 0;
+  width: 7.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-xl, 0.75rem);
+}
+@keyframes ScPlanDetailsCard_skeletonShimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
 }
 
 /* src/SC-Profile/ScProfile.module.css */
@@ -7155,10 +7222,75 @@
   font-weight: 500;
   width: 100%;
 }
+.ScPlanDetailsCardMobile_badgeGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 0.375rem);
+  min-width: 0;
+}
 .ScPlanDetailsCardMobile_scBadgesInstance {
   flex-shrink: 0 !important;
 }
+.ScPlanDetailsCardMobile_badgeDot {
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: var(--radius-full, 999px);
+  background: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  flex-shrink: 0;
+}
+.ScPlanDetailsCardMobile_badgeSubText {
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  font-weight: 500;
+  white-space: nowrap;
+}
 .ScPlanDetailsCardMobile_scButtonInstance {
   width: 100% !important;
   flex-shrink: 0 !important;
 }
+.ScPlanDetailsCardMobile_skeletonPill {
+  display: block;
+  border-radius: var(--radius-full, 999px);
+  background:
+    linear-gradient(
+      90deg,
+      var(--alias-fill-neutral-neutral, #242424) 0%,
+      var(--alias-border-subtle, #333333) 45%,
+      var(--alias-fill-neutral-neutral, #242424) 90%);
+  background-size: 200% 100%;
+  animation: ScPlanDetailsCardMobile_skeletonShimmer 1.1s ease-in-out infinite;
+}
+.ScPlanDetailsCardMobile_badgeSkeleton {
+  width: 3.3125rem;
+  height: 1.75rem;
+}
+.ScPlanDetailsCardMobile_planNameSkeleton {
+  width: 4.25rem;
+  height: 1.25rem;
+}
+.ScPlanDetailsCardMobile_creditsSkeleton {
+  width: 7.5rem;
+  height: 1.25rem;
+  margin-left: var(--spacing-md, 0.5rem);
+}
+.ScPlanDetailsCardMobile_priceSkeleton {
+  width: 5rem;
+  height: 0.875rem;
+  margin-top: 0.375rem;
+  align-self: flex-start;
+}
+.ScPlanDetailsCardMobile_buttonSkeleton {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: var(--radius-xl, 0.75rem);
+}
+@keyframes ScPlanDetailsCardMobile_skeletonShimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}

package/dist/index.d.mts

@@ -205,12 +205,14 @@ interface IScPlanDetailsCardProps extends React.HTMLAttributes<HTMLDivElement> {
     planCredits?: string;
     planPrice?: string;
     badgeText?: string;
+    badgeSubText?: string;
     currentPlanLabel?: string;
     upgradeButtonText?: string;
+    isLoading?: boolean;
     onUpgrade?: () => void;
     className?: string;
 }
-declare const ScPlanDetailsCard: ({ planName, planCredits, planPrice, badgeText, currentPlanLabel, upgradeButtonText, onUpgrade, className, ...props }: IScPlanDetailsCardProps) => JSX.Element;
+declare const ScPlanDetailsCard: ({ planName, planCredits, planPrice, badgeText, badgeSubText, currentPlanLabel, upgradeButtonText, isLoading, onUpgrade, className, ...props }: IScPlanDetailsCardProps) => JSX.Element;
 
 interface IScProfileProps extends React.HTMLAttributes<HTMLDivElement> {
     name?: string;
@@ -1069,11 +1071,13 @@ interface IScPlanDetailsCardMobileProps extends React.HTMLAttributes<HTMLDivElem
     planCredits?: string;
     planPrice?: string;
     badgeText?: string;
+    badgeSubText?: string;
     currentPlanLabel?: string;
     upgradeButtonText?: string;
+    isLoading?: boolean;
     onUpgrade?: () => void;
     className?: string;
 }
-declare const ScPlanDetailsCardMobile: ({ planName, planCredits, planPrice, badgeText, currentPlanLabel, upgradeButtonText, onUpgrade, className, ...props }: IScPlanDetailsCardMobileProps) => JSX.Element;
+declare const ScPlanDetailsCardMobile: ({ planName, planCredits, planPrice, badgeText, badgeSubText, currentPlanLabel, upgradeButtonText, isLoading, onUpgrade, className, ...props }: IScPlanDetailsCardMobileProps) => JSX.Element;
 
 export { type ArtifaxMenuItem, type ArtifaxSection, type ArtifaxSidebarAssistantCta, type ArtifaxSidebarCreditWarning, type ArtifaxSidebarIconContext, type ArtifaxSidebarIconMap, type ArtifaxSidebarIconRenderer, type ArtifaxSidebarProfile, CreditWarningBanner, type CreditWarningBannerProps, type IInvoiceHistoryMobileProps, type IScAccessProps, type IScAppCardProps, type IScAppCardV3Props, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScArtifaxSidebarProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScBriefCardProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardMobileProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScGuideProps, type IScHDividerProps, type IScHeaderProps, type IScImageFieldProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScMobileBottomActionProps, type IScMobileTopNavProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardMobileProps, type IScPlanDetailsCardProps, type IScPopUpMenuProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProfileV2MobileProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralCardMobileProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleMobileProps, type IScRoleProps, type IScSettingsNavProps, type IScSettingsTabCompProps, type IScSideBarLogoUnitProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListMobileProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, type IScWorkspaceSettingsMobileProps, type IScWorkspaceSwitchMobileProps, type IScWorkspaceSwitchMobileV2Props, type IUsageHistoryMobileProps, InvoiceHistoryMobile, NscWorkspaceSwitch, type PlanFeatureSection, ScAccess, ScAppCard, ScAppCardV3, ScAppField, ScAppListingCard, ScArtifaxInvite, ScArtifaxSidebar, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScBriefCard, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScCreditsUsageCardMobile, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScGuide, ScHDivider, ScHeader, ScImageField, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScMobileBottomAction, ScMobileTopNav, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScPlanDetailsCardMobile, ScPopUpMenu, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProfileV2Mobile, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralCardMobile, ScReferralTableHeader, ScReferralTableList, ScRole, ScRoleMobile, ScSettingsNav, ScSettingsTabComp, ScSideBarLogoUnit, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTableListMobile, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSettingsMobile, ScWorkspaceSwitchCard, type ScWorkspaceSwitchCardProps, ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, UsageHistoryMobile, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };

package/dist/index.d.ts

@@ -205,12 +205,14 @@ interface IScPlanDetailsCardProps extends React.HTMLAttributes<HTMLDivElement> {
     planCredits?: string;
     planPrice?: string;
     badgeText?: string;
+    badgeSubText?: string;
     currentPlanLabel?: string;
     upgradeButtonText?: string;
+    isLoading?: boolean;
     onUpgrade?: () => void;
     className?: string;
 }
-declare const ScPlanDetailsCard: ({ planName, planCredits, planPrice, badgeText, currentPlanLabel, upgradeButtonText, onUpgrade, className, ...props }: IScPlanDetailsCardProps) => JSX.Element;
+declare const ScPlanDetailsCard: ({ planName, planCredits, planPrice, badgeText, badgeSubText, currentPlanLabel, upgradeButtonText, isLoading, onUpgrade, className, ...props }: IScPlanDetailsCardProps) => JSX.Element;
 
 interface IScProfileProps extends React.HTMLAttributes<HTMLDivElement> {
     name?: string;
@@ -1069,11 +1071,13 @@ interface IScPlanDetailsCardMobileProps extends React.HTMLAttributes<HTMLDivElem
     planCredits?: string;
     planPrice?: string;
     badgeText?: string;
+    badgeSubText?: string;
     currentPlanLabel?: string;
     upgradeButtonText?: string;
+    isLoading?: boolean;
     onUpgrade?: () => void;
     className?: string;
 }
-declare const ScPlanDetailsCardMobile: ({ planName, planCredits, planPrice, badgeText, currentPlanLabel, upgradeButtonText, onUpgrade, className, ...props }: IScPlanDetailsCardMobileProps) => JSX.Element;
+declare const ScPlanDetailsCardMobile: ({ planName, planCredits, planPrice, badgeText, badgeSubText, currentPlanLabel, upgradeButtonText, isLoading, onUpgrade, className, ...props }: IScPlanDetailsCardMobileProps) => JSX.Element;
 
 export { type ArtifaxMenuItem, type ArtifaxSection, type ArtifaxSidebarAssistantCta, type ArtifaxSidebarCreditWarning, type ArtifaxSidebarIconContext, type ArtifaxSidebarIconMap, type ArtifaxSidebarIconRenderer, type ArtifaxSidebarProfile, CreditWarningBanner, type CreditWarningBannerProps, type IInvoiceHistoryMobileProps, type IScAccessProps, type IScAppCardProps, type IScAppCardV3Props, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScArtifaxSidebarProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScBriefCardProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardMobileProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScGuideProps, type IScHDividerProps, type IScHeaderProps, type IScImageFieldProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScMobileBottomActionProps, type IScMobileTopNavProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardMobileProps, type IScPlanDetailsCardProps, type IScPopUpMenuProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProfileV2MobileProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralCardMobileProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleMobileProps, type IScRoleProps, type IScSettingsNavProps, type IScSettingsTabCompProps, type IScSideBarLogoUnitProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListMobileProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, type IScWorkspaceSettingsMobileProps, type IScWorkspaceSwitchMobileProps, type IScWorkspaceSwitchMobileV2Props, type IUsageHistoryMobileProps, InvoiceHistoryMobile, NscWorkspaceSwitch, type PlanFeatureSection, ScAccess, ScAppCard, ScAppCardV3, ScAppField, ScAppListingCard, ScArtifaxInvite, ScArtifaxSidebar, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScBriefCard, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScCreditsUsageCardMobile, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScGuide, ScHDivider, ScHeader, ScImageField, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScMobileBottomAction, ScMobileTopNav, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScPlanDetailsCardMobile, ScPopUpMenu, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProfileV2Mobile, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralCardMobile, ScReferralTableHeader, ScReferralTableList, ScRole, ScRoleMobile, ScSettingsNav, ScSettingsTabComp, ScSideBarLogoUnit, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTableListMobile, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSettingsMobile, ScWorkspaceSwitchCard, type ScWorkspaceSwitchCardProps, ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, UsageHistoryMobile, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };

package/dist/index.js

@@ -1712,7 +1712,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",
@@ -1720,7 +1723,14 @@ 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
@@ -1732,8 +1742,10 @@ var ScPlanDetailsCard = ({
   planCredits = "30,000 credits",
   planPrice = "\u20B90.00 / month",
   badgeText = "Active",
+  badgeSubText,
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
+  isLoading = false,
   onUpgrade,
   className,
   ...props
@@ -1748,27 +1760,39 @@ var ScPlanDetailsCard = ({
           className: ScPlanDetailsCard_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        ScBadges,
-        {
-          text: badgeText,
-          variant: "success",
-          styleVariant: "opaque",
-          className: ScPlanDetailsCard_default.scBadgesInstance
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: ScPlanDetailsCard_default.badgeGroup, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.badgeSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          ScBadges,
+          {
+            text: badgeText,
+            variant: "success",
+            styleVariant: "opaque",
+            className: ScPlanDetailsCard_default.scBadgesInstance
+          }
+        ),
+        badgeSubText && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: ScPlanDetailsCard_default.badgeDot }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: ScPlanDetailsCard_default.badgeSubText, children: badgeSubText })
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ScHDivider, { className: ScPlanDetailsCard_default.scHDividerInstance }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ScPlanDetailsCard_default.planDetails, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ScPlanDetailsCard_default.planInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: ScPlanDetailsCard_default.planInfo, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ScPlanDetailsCard_default.planNameRow, "aria-label": "Loading plan details", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.planNameSkeleton}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.creditsSkeleton}` })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.priceSkeleton}` })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ScPlanDetailsCard_default.planNameRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: ScPlanDetailsCard_default.planName, children: planName }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: ScPlanDetailsCard_default.dotSeparator }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: ScPlanDetailsCard_default.planName, children: planCredits })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: ScPlanDetailsCard_default.planPrice, children: planPrice })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      ] }) }),
+      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${ScPlanDetailsCard_default.skeletonPill} ${ScPlanDetailsCard_default.buttonSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         ScButton,
         {
           icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons14.SiconHome, { className: ScPlanDetailsCard_default.siconHomeInstance }),
@@ -6390,8 +6414,18 @@ 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
@@ -6402,8 +6436,10 @@ var ScPlanDetailsCardMobile = ({
   planCredits = "30,000 credits",
   planPrice = "\u20B90.00 / month",
   badgeText = "Active",
+  badgeSubText,
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
+  isLoading = false,
   onUpgrade,
   className,
   ...props
@@ -6420,26 +6456,38 @@ var ScPlanDetailsCardMobile = ({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-        ScBadges,
-        {
-          text: badgeText,
-          variant: "success",
-          styleVariant: "opaque",
-          className: ScPlanDetailsCardMobile_default.scBadgesInstance
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScPlanDetailsCardMobile_default.badgeGroup, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.badgeSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          ScBadges,
+          {
+            text: badgeText,
+            variant: "success",
+            styleVariant: "opaque",
+            className: ScPlanDetailsCardMobile_default.scBadgesInstance
+          }
+        ),
+        badgeSubText && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeDot }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeSubText, children: badgeSubText })
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScPlanDetailsCardMobile_default.divider }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, "aria-label": "Loading plan details", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.planNameSkeleton}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.creditsSkeleton}` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.priceSkeleton}` })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
         /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
         /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScPlanDetailsCardMobile_default.dot }),
         /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    ] }) }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.buttonSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       ScButton,
       {
         text: upgradeButtonText,

package/dist/index.mjs

@@ -1602,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",
@@ -1610,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 = "\u20B90.00 / month",
   badgeText = "Active",
+  badgeSubText,
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
+  isLoading = false,
   onUpgrade,
   className,
   ...props
@@ -1638,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 }),
@@ -1683,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",
@@ -1700,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,
             " "
@@ -1849,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",
@@ -1866,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,
             " "
@@ -1900,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",
@@ -1916,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,
           " "
         ] }) }) })
@@ -1938,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,
@@ -1974,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 }),
@@ -2152,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 }),
@@ -2179,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",
             {
@@ -2200,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 })
         ] })
       ]
     }
@@ -2339,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",
@@ -2358,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",
@@ -2449,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",
@@ -2465,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 }),
@@ -2476,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 }),
@@ -2490,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,
@@ -2503,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,
@@ -2645,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(
@@ -2781,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",
@@ -2930,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",
@@ -2955,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",
@@ -3001,7 +3025,7 @@ function StreamoidSidebar({
                 }
               ) : null,
               /* @__PURE__ */ jsx40(HDivider, {}),
-              profile ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+              profile ? /* @__PURE__ */ jsxs32(Fragment15, { children: [
                 /* @__PURE__ */ jsxs32(
                   "div",
                   {
@@ -3041,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",
@@ -3113,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",
@@ -3189,7 +3213,7 @@ function StreamoidSidebar({
               }
             ) : null,
             /* @__PURE__ */ jsx40(HDivider, {}),
-            profile ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
+            profile ? /* @__PURE__ */ jsxs32(Fragment15, { children: [
               /* @__PURE__ */ jsx40(
                 "div",
                 {
@@ -3296,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 });
 }
@@ -3304,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)
@@ -4481,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",
@@ -4528,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,
@@ -4567,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,
               {
@@ -4742,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,
@@ -4764,7 +4788,7 @@ var ScCheckField = ({
         className: ScCheckField_default.scPairtextInstance
       },
       i
-    )) : /* @__PURE__ */ jsxs49(Fragment17, { children: [
+    )) : /* @__PURE__ */ jsxs49(Fragment18, { children: [
       /* @__PURE__ */ jsx57(
         ScPairtext,
         {
@@ -4797,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",
@@ -4813,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 })
       ] })
     }
   );
@@ -5106,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,
@@ -5150,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",
@@ -5158,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",
@@ -5192,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",
@@ -5242,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,
           " "
         ] }) })
@@ -5770,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,
@@ -5800,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(
@@ -5821,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(
@@ -6293,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 = "\u20B90.00 / month",
   badgeText = "Active",
+  badgeSubText,
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
+  isLoading = false,
   onUpgrade,
   className,
   ...props
@@ -6323,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",