@streamoid/ui 0.5.0 → 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;
@@ -740,7 +742,7 @@ interface IScTabSwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
     scTabComptype?: string;
     className?: string;
 }
-declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, ...props }: IScTabSwitcherProps) => JSX.Element;
+declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, scTabCompicon: _scTabCompicon, scTabCompactive: _scTabCompactive, scTabComptype: _scTabComptype, ...props }: IScTabSwitcherProps) => JSX.Element;
 
 interface IScTableHeaderProps {
     type?: "default" | "pending";
@@ -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;
@@ -740,7 +742,7 @@ interface IScTabSwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
     scTabComptype?: string;
     className?: string;
 }
-declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, ...props }: IScTabSwitcherProps) => JSX.Element;
+declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, scTabCompicon: _scTabCompicon, scTabCompactive: _scTabCompactive, scTabComptype: _scTabComptype, ...props }: IScTabSwitcherProps) => JSX.Element;
 
 interface IScTableHeaderProps {
     type?: "default" | "pending";
@@ -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

@@ -507,7 +507,7 @@ var ScPairtext = ({
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ScBillingHistoryTableList = ({
   invoiceNumber = "# INV-2800-2026",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   date = "Nov 9th, 2025",
   downloadLabel = "Download invoice",
   className,
@@ -637,8 +637,12 @@ var ScButton = ({
   className,
   ...props
 }) => {
-  const noiseUrl = (0, import_react.useMemo)(() => {
-    if (typeof window === "undefined" || variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") return "";
+  const [noiseUrl, setNoiseUrl] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") {
+      setNoiseUrl("");
+      return;
+    }
     const size2 = 128;
     const canvas = document.createElement("canvas");
     canvas.width = size2;
@@ -653,7 +657,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 = (0, import_react.isValidElement)(icon) ? (0, import_react.cloneElement)(icon, { color: "currentColor", strokeWidth }) : icon;
@@ -1579,7 +1583,7 @@ var import_icons12 = require("@streamoid/icons");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var ScPlanCard = ({
   planName = "Pro",
-  price = "$49.99 / month",
+  price = "\u20B949.99 / month",
   credits = "30,000 Credits",
   type = "free",
   features = [],
@@ -1675,7 +1679,14 @@ var ScPlanCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons12.SiconHome, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_icons12.SiconHome,
+                {
+                  color: "var(--alias-text-and-icons-tertiary, #9e9e9e)",
+                  size: 24,
+                  strokeWidth: 1.5
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -1701,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",
@@ -1709,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
@@ -1719,10 +1740,12 @@ var import_jsx_runtime25 = require("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
@@ -1737,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 }),
@@ -2046,6 +2081,9 @@ var ScTabSwitcher = ({
   component4,
   component5,
   className,
+  scTabCompicon: _scTabCompicon,
+  scTabCompactive: _scTabCompactive,
+  scTabComptype: _scTabComptype,
   ...props
 }) => {
   const variantsClassName = ScTabSwitcher_default["tab-count-" + tabCount];
@@ -6081,7 +6119,7 @@ var import_jsx_runtime79 = require("react/jsx-runtime");
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   className
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
@@ -6376,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
@@ -6386,10 +6434,12 @@ var import_jsx_runtime85 = require("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
@@ -6406,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,