@streamoid/ui 0.2.6 → 0.3.0

package/dist/index.css

@@ -4060,7 +4060,7 @@
   color: var(--alias-text-and-icons-muted, #7a7a7a);
 }
 .ScOnlyField_inputText {
-  color: var(--alias-text-and-icons-muted, #7a7a7a);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
   text-align: left;
   font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
   font-size: var(--text-text-sm-regular-font-size, 0.875rem);
@@ -4072,6 +4072,9 @@
   align-items: center;
   justify-content: flex-start;
 }
+.ScOnlyField_inputText::placeholder {
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
+}
 .ScOnlyField_scOnlyField.ScOnlyField_tf-group-icon-left .ScOnlyField_inputContainer,
 .ScOnlyField_scOnlyField.ScOnlyField_tf-group-icon-left-right .ScOnlyField_inputContainer {
   gap: var(--spacing-md, 0.5rem);
@@ -5506,29 +5509,53 @@
 .ScMobileBottomAction_scMobileBottomAction * {
   box-sizing: border-box;
 }
+.ScMobileBottomAction_twoButton {
+  gap: var(--spacing-3xl, 16px);
+}
 .ScMobileBottomAction_button {
   display: flex;
   flex: 1 0 0;
-  height: 48px;
+  height: 40px;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-xl, 12px) var(--spacing-3xl, 16px);
+  padding: var(--spacing-md, 8px) var(--spacing-3xl, 16px);
   background: var(--alias-fill-base-base, #f5f5f5);
   border-radius: var(--medium-5, 12px);
   border: none;
   cursor: pointer;
-  width: 100%;
+  min-width: 0;
+}
+.ScMobileBottomAction_outlineButton {
+  display: flex;
+  flex: 1 0 0;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md, 8px) var(--spacing-3xl, 16px);
+  background: transparent;
+  border-radius: var(--medium-5, 12px);
+  border: 1.25px solid var(--alias-border-default, #3e3e3e);
+  cursor: pointer;
+  min-width: 0;
 }
 .ScMobileBottomAction_disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 .ScMobileBottomAction_buttonText {
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-weight: var(--font-weight-font-weight-medium, 500);
+  font-size: var(--font-size-font-size-sm, 14px);
+  line-height: var(--line-height-line-height-sm, 20px);
+  color: var(--alias-text-icons-inverse, #101010);
+  white-space: nowrap;
+}
+.ScMobileBottomAction_outlineButtonText {
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);
   font-weight: var(--font-weight-font-weight-medium, 500);
   font-size: var(--font-size-font-size-md, 16px);
   line-height: var(--line-height-line-height-md, 24px);
-  color: var(--alias-text-icons-inverse, #101010);
+  color: var(--alias-text-icons-primary, #f5f5f5);
   white-space: nowrap;
 }
 

package/dist/index.d.mts

@@ -597,7 +597,7 @@ interface IScTextFieldProps extends React.InputHTMLAttributes<HTMLInputElement>
     placeholderFilled?: string;
     label?: string;
 }
-declare const ScTextField: ({ tfRightIcon, tfLeftIcon, state, tfGroup, labelGroup, className, placeholderFilled, label, ...props }: IScTextFieldProps) => JSX.Element;
+declare const ScTextField: ({ tfRightIcon, tfLeftIcon, state, tfGroup, labelGroup, className, placeholderFilled, label, style, ...props }: IScTextFieldProps) => JSX.Element;
 
 interface IScToggleSwitchProps extends React.HTMLAttributes<HTMLDivElement> {
     active?: "true" | "false";
@@ -769,16 +769,22 @@ interface IScMobileTopNavProps {
 declare const ScMobileTopNav: ({ type, searchIcon, search, heading, chatTitle, searchPlaceholder, searchValue, menuIcon, searchIconElement, closeIcon, moreIcon, onMenuClick, onSearchClick, onCloseClick, onMoreClick, onSearchChange, className, ...props }: IScMobileTopNavProps & React$1.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
 interface IScMobileBottomActionProps {
-    /** Button text */
+    /** Primary button text */
     text?: string;
-    /** Whether button is disabled */
+    /** Whether primary button is disabled */
     disabled?: boolean;
-    /** Click handler */
+    /** Primary button click handler */
     onClick?: (e: React$1.MouseEvent) => void;
+    /** Secondary (outline) button text — renders 2-button layout when provided */
+    secondaryText?: string;
+    /** Whether secondary button is disabled */
+    secondaryDisabled?: boolean;
+    /** Secondary button click handler */
+    onSecondaryClick?: (e: React$1.MouseEvent) => void;
     /** Additional class name */
     className?: string;
 }
-declare const ScMobileBottomAction: ({ text, disabled, onClick, className, ...props }: IScMobileBottomActionProps & React$1.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+declare const ScMobileBottomAction: ({ text, disabled, onClick, secondaryText, secondaryDisabled, onSecondaryClick, className, ...props }: IScMobileBottomActionProps & React$1.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
 interface IScPopUpMenuProps {
     /** Menu label text */

package/dist/index.d.ts

@@ -597,7 +597,7 @@ interface IScTextFieldProps extends React.InputHTMLAttributes<HTMLInputElement>
     placeholderFilled?: string;
     label?: string;
 }
-declare const ScTextField: ({ tfRightIcon, tfLeftIcon, state, tfGroup, labelGroup, className, placeholderFilled, label, ...props }: IScTextFieldProps) => JSX.Element;
+declare const ScTextField: ({ tfRightIcon, tfLeftIcon, state, tfGroup, labelGroup, className, placeholderFilled, label, style, ...props }: IScTextFieldProps) => JSX.Element;
 
 interface IScToggleSwitchProps extends React.HTMLAttributes<HTMLDivElement> {
     active?: "true" | "false";
@@ -769,16 +769,22 @@ interface IScMobileTopNavProps {
 declare const ScMobileTopNav: ({ type, searchIcon, search, heading, chatTitle, searchPlaceholder, searchValue, menuIcon, searchIconElement, closeIcon, moreIcon, onMenuClick, onSearchClick, onCloseClick, onMoreClick, onSearchChange, className, ...props }: IScMobileTopNavProps & React$1.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
 interface IScMobileBottomActionProps {
-    /** Button text */
+    /** Primary button text */
     text?: string;
-    /** Whether button is disabled */
+    /** Whether primary button is disabled */
     disabled?: boolean;
-    /** Click handler */
+    /** Primary button click handler */
     onClick?: (e: React$1.MouseEvent) => void;
+    /** Secondary (outline) button text — renders 2-button layout when provided */
+    secondaryText?: string;
+    /** Whether secondary button is disabled */
+    secondaryDisabled?: boolean;
+    /** Secondary button click handler */
+    onSecondaryClick?: (e: React$1.MouseEvent) => void;
     /** Additional class name */
     className?: string;
 }
-declare const ScMobileBottomAction: ({ text, disabled, onClick, className, ...props }: IScMobileBottomActionProps & React$1.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+declare const ScMobileBottomAction: ({ text, disabled, onClick, secondaryText, secondaryDisabled, onSecondaryClick, className, ...props }: IScMobileBottomActionProps & React$1.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 
 interface IScPopUpMenuProps {
     /** Menu label text */

package/dist/index.js

@@ -2076,6 +2076,7 @@ var ScTextField = ({
   className,
   placeholderFilled = "Placeholder",
   label = "",
+  style,
   ...props
 }) => {
   const [focused, setFocused] = (0, import_react6.useState)(false);
@@ -2085,6 +2086,7 @@ var ScTextField = ({
     "div",
     {
       className: ScTextField_default.scTextField + " " + className + " " + variantsClassName,
+      style,
       children: [
         labelGroup && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: ScTextField_default.labelContainer, children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: ScTextField_default.label, children: [
@@ -3734,7 +3736,7 @@ var ScOnlyField = ({
               border: "none",
               outline: "none",
               font: "inherit",
-              color: "inherit",
+              color: "var(--alias-text-and-icons-primary, #f5f5f5)",
               width: "100%",
               padding: 0,
               margin: 0
@@ -5105,9 +5107,12 @@ var ScMobileTopNav = ({
 // src/SC-MobileBottomAction/ScMobileBottomAction.module.css
 var ScMobileBottomAction_default = {
   scMobileBottomAction: "ScMobileBottomAction_scMobileBottomAction",
+  twoButton: "ScMobileBottomAction_twoButton",
   button: "ScMobileBottomAction_button",
+  outlineButton: "ScMobileBottomAction_outlineButton",
   disabled: "ScMobileBottomAction_disabled",
-  buttonText: "ScMobileBottomAction_buttonText"
+  buttonText: "ScMobileBottomAction_buttonText",
+  outlineButtonText: "ScMobileBottomAction_outlineButtonText"
 };
 
 // src/SC-MobileBottomAction/ScMobileBottomAction.tsx
@@ -5116,23 +5121,38 @@ var ScMobileBottomAction = ({
   text = "Save Changes",
   disabled = false,
   onClick,
+  secondaryText,
+  secondaryDisabled = false,
+  onSecondaryClick,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  const isTwoButton = !!secondaryText;
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "div",
     {
-      className: ScMobileBottomAction_default.scMobileBottomAction + " " + className,
+      className: ScMobileBottomAction_default.scMobileBottomAction + (isTwoButton ? " " + ScMobileBottomAction_default.twoButton : "") + " " + className,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-        "button",
-        {
-          className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
-          onClick,
-          disabled,
-          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: ScMobileBottomAction_default.buttonText, children: text })
-        }
-      )
+      children: [
+        isTwoButton && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          "button",
+          {
+            className: ScMobileBottomAction_default.outlineButton + " " + (secondaryDisabled ? ScMobileBottomAction_default.disabled : ""),
+            onClick: onSecondaryClick,
+            disabled: secondaryDisabled,
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          "button",
+          {
+            className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
+            onClick,
+            disabled,
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: ScMobileBottomAction_default.buttonText, children: text })
+          }
+        )
+      ]
     }
   );
 };

package/dist/index.mjs

@@ -1972,6 +1972,7 @@ var ScTextField = ({
   className,
   placeholderFilled = "Placeholder",
   label = "",
+  style,
   ...props
 }) => {
   const [focused, setFocused] = useState3(false);
@@ -1981,6 +1982,7 @@ var ScTextField = ({
     "div",
     {
       className: ScTextField_default.scTextField + " " + className + " " + variantsClassName,
+      style,
       children: [
         labelGroup && /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.labelContainer, children: [
           /* @__PURE__ */ jsxs25("div", { className: ScTextField_default.label, children: [
@@ -3635,7 +3637,7 @@ var ScOnlyField = ({
               border: "none",
               outline: "none",
               font: "inherit",
-              color: "inherit",
+              color: "var(--alias-text-and-icons-primary, #f5f5f5)",
               width: "100%",
               padding: 0,
               margin: 0
@@ -5011,34 +5013,52 @@ var ScMobileTopNav = ({
 // src/SC-MobileBottomAction/ScMobileBottomAction.module.css
 var ScMobileBottomAction_default = {
   scMobileBottomAction: "ScMobileBottomAction_scMobileBottomAction",
+  twoButton: "ScMobileBottomAction_twoButton",
   button: "ScMobileBottomAction_button",
+  outlineButton: "ScMobileBottomAction_outlineButton",
   disabled: "ScMobileBottomAction_disabled",
-  buttonText: "ScMobileBottomAction_buttonText"
+  buttonText: "ScMobileBottomAction_buttonText",
+  outlineButtonText: "ScMobileBottomAction_outlineButtonText"
 };
 
 // src/SC-MobileBottomAction/ScMobileBottomAction.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
 var ScMobileBottomAction = ({
   text = "Save Changes",
   disabled = false,
   onClick,
+  secondaryText,
+  secondaryDisabled = false,
+  onSecondaryClick,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx69(
+  const isTwoButton = !!secondaryText;
+  return /* @__PURE__ */ jsxs60(
     "div",
     {
-      className: ScMobileBottomAction_default.scMobileBottomAction + " " + className,
+      className: ScMobileBottomAction_default.scMobileBottomAction + (isTwoButton ? " " + ScMobileBottomAction_default.twoButton : "") + " " + className,
       ...props,
-      children: /* @__PURE__ */ jsx69(
-        "button",
-        {
-          className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
-          onClick,
-          disabled,
-          children: /* @__PURE__ */ jsx69("span", { className: ScMobileBottomAction_default.buttonText, children: text })
-        }
-      )
+      children: [
+        isTwoButton && /* @__PURE__ */ jsx69(
+          "button",
+          {
+            className: ScMobileBottomAction_default.outlineButton + " " + (secondaryDisabled ? ScMobileBottomAction_default.disabled : ""),
+            onClick: onSecondaryClick,
+            disabled: secondaryDisabled,
+            children: /* @__PURE__ */ jsx69("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
+          }
+        ),
+        /* @__PURE__ */ jsx69(
+          "button",
+          {
+            className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
+            onClick,
+            disabled,
+            children: /* @__PURE__ */ jsx69("span", { className: ScMobileBottomAction_default.buttonText, children: text })
+          }
+        )
+      ]
     }
   );
 };
@@ -5053,7 +5073,7 @@ var ScPopUpMenu_default = {
 };
 
 // src/SC-PopUpMenu/ScPopUpMenu.tsx
-import { jsx as jsx70, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs61 } from "react/jsx-runtime";
 var ScPopUpMenu = ({
   menu = "Options",
   state = "default",
@@ -5062,7 +5082,7 @@ var ScPopUpMenu = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
@@ -5096,7 +5116,7 @@ var ScReferralCardMobile_default = {
 };
 
 // src/SC-referralCard-Mobile/ScReferralCardMobile.tsx
-import { jsx as jsx71, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs62 } from "react/jsx-runtime";
 var ScReferralCardMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -5109,17 +5129,17 @@ var ScReferralCardMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs62(
     "div",
     {
       className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.userRow, children: [
-          /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.profileSection, children: [
+        /* @__PURE__ */ jsxs62("div", { className: ScReferralCardMobile_default.userRow, children: [
+          /* @__PURE__ */ jsxs62("div", { className: ScReferralCardMobile_default.profileSection, children: [
             /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ jsx71("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
-            /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.userInfo, children: [
+            /* @__PURE__ */ jsxs62("div", { className: ScReferralCardMobile_default.userInfo, children: [
               /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.userName, children: name }),
               /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.userEmail, children: email })
             ] })
@@ -5127,7 +5147,7 @@ var ScReferralCardMobile = ({
           /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
         ] }),
         /* @__PURE__ */ jsx71("div", { className: ScReferralCardMobile_default.divider }),
-        /* @__PURE__ */ jsxs61("div", { className: ScReferralCardMobile_default.detailsRow, children: [
+        /* @__PURE__ */ jsxs62("div", { className: ScReferralCardMobile_default.detailsRow, children: [
           /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.dateText, children: date }),
           /* @__PURE__ */ jsx71("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
         ] })
@@ -5146,15 +5166,15 @@ var InvoiceHistoryMobile_default = {
 };
 
 // src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.tsx
-import { jsx as jsx72, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
   amount = "$320.89",
   className
 }) => {
-  return /* @__PURE__ */ jsxs62("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ jsxs62("div", { className: InvoiceHistoryMobile_default.info, children: [
+  return /* @__PURE__ */ jsxs63("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsxs63("div", { className: InvoiceHistoryMobile_default.info, children: [
       /* @__PURE__ */ jsx72("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
       /* @__PURE__ */ jsx72("div", { className: InvoiceHistoryMobile_default.date, children: date })
     ] }),
@@ -5176,7 +5196,7 @@ var UsageHistoryMobile_default = {
 };
 
 // src/SC-UsageHistoryMobile/UsageHistoryMobile.tsx
-import { jsx as jsx73, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs64 } from "react/jsx-runtime";
 var UsageHistoryMobile = ({
   serviceName = "Artifax Generation",
   credits = "50",
@@ -5185,13 +5205,13 @@ var UsageHistoryMobile = ({
   balance = "84,902",
   className
 }) => {
-  return /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.row1, children: [
+  return /* @__PURE__ */ jsxs64("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ jsxs64("div", { className: UsageHistoryMobile_default.row1, children: [
       /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
       /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.credits, children: credits })
     ] }),
-    /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.row2, children: [
-      /* @__PURE__ */ jsxs63("div", { className: UsageHistoryMobile_default.metaLeft, children: [
+    /* @__PURE__ */ jsxs64("div", { className: UsageHistoryMobile_default.row2, children: [
+      /* @__PURE__ */ jsxs64("div", { className: UsageHistoryMobile_default.metaLeft, children: [
         /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
         /* @__PURE__ */ jsx73("div", { className: UsageHistoryMobile_default.divider }),
         /* @__PURE__ */ jsx73("span", { className: UsageHistoryMobile_default.metaText, children: date })
@@ -5220,7 +5240,7 @@ var ScWorkspaceSwitchMobileV2_default = {
 };
 
 // src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.tsx
-import { jsx as jsx74, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs65 } from "react/jsx-runtime";
 var ScWorkspaceSwitchMobileV2 = ({
   wsName = "Workspace name is kepler",
   initials = "WS",
@@ -5239,7 +5259,7 @@ var ScWorkspaceSwitchMobileV2 = ({
       className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
       onClick,
       ...props,
-      children: /* @__PURE__ */ jsxs64("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
+      children: /* @__PURE__ */ jsxs65("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
         /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ jsx74(
           ScDp,
           {
@@ -5254,9 +5274,9 @@ var ScWorkspaceSwitchMobileV2 = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs64("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
+        /* @__PURE__ */ jsxs65("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
           /* @__PURE__ */ jsx74("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
-          /* @__PURE__ */ jsxs64("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
+          /* @__PURE__ */ jsxs65("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
             /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
             /* @__PURE__ */ jsx74("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
             /* @__PURE__ */ jsx74("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
@@ -5288,7 +5308,7 @@ var ScImageField_default = {
 
 // src/SC-imageField/ScImageField.tsx
 import { SiconUpload as SiconUpload2, SiconDelete as SiconDelete2 } from "@streamoid/icons";
-import { jsx as jsx75, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs66 } from "react/jsx-runtime";
 var ScImageField = ({
   label = "Label",
   imagePreview,
@@ -5311,7 +5331,7 @@ var ScImageField = ({
     }
     e.target.value = "";
   }
-  return /* @__PURE__ */ jsxs65("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
+  return /* @__PURE__ */ jsxs66("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
     /* @__PURE__ */ jsx75(
       "input",
       {
@@ -5323,7 +5343,7 @@ var ScImageField = ({
       }
     ),
     /* @__PURE__ */ jsx75("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ jsx75("div", { className: ScImageField_default.label, children: label }) }),
-    hasImage ? /* @__PURE__ */ jsxs65("div", { className: ScImageField_default.previewArea, children: [
+    hasImage ? /* @__PURE__ */ jsxs66("div", { className: ScImageField_default.previewArea, children: [
       /* @__PURE__ */ jsx75(
         "img",
         {
@@ -5344,7 +5364,7 @@ var ScImageField = ({
           }
         }
       )
-    ] }) : /* @__PURE__ */ jsxs65("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
+    ] }) : /* @__PURE__ */ jsxs66("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
       /* @__PURE__ */ jsx75(SiconUpload2, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
       /* @__PURE__ */ jsx75("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
     ] })
@@ -5393,7 +5413,7 @@ var ScCreditsUsageCardMobile_default = {
 
 // src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.tsx
 import { SiconCredits as SiconCredits3 } from "@streamoid/icons";
-import { jsx as jsx77, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs67 } from "react/jsx-runtime";
 var ScCreditsUsageCardMobile = ({
   usageLabel = "Credits usage",
   usageText = "8,450 / 30,000",
@@ -5403,8 +5423,8 @@ var ScCreditsUsageCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs66("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ jsxs66("div", { className: ScCreditsUsageCardMobile_default.header, children: [
+  return /* @__PURE__ */ jsxs67("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ jsxs67("div", { className: ScCreditsUsageCardMobile_default.header, children: [
       /* @__PURE__ */ jsx77(
         SiconCredits3,
         {
@@ -5415,7 +5435,7 @@ var ScCreditsUsageCardMobile = ({
       /* @__PURE__ */ jsx77("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
     ] }),
     /* @__PURE__ */ jsx77("div", { className: ScCreditsUsageCardMobile_default.divider }),
-    /* @__PURE__ */ jsxs66("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
+    /* @__PURE__ */ jsxs67("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
       /* @__PURE__ */ jsx77("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
       /* @__PURE__ */ jsx77("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
     ] }),
@@ -5451,7 +5471,7 @@ var ScPlanDetailsCardMobile_default = {
 
 // src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.tsx
 import { SiconBilling as SiconBilling4 } from "@streamoid/icons";
-import { jsx as jsx78, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs68 } from "react/jsx-runtime";
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
@@ -5463,9 +5483,9 @@ var ScPlanDetailsCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
-      /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
+  return /* @__PURE__ */ jsxs68("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ jsxs68("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
+      /* @__PURE__ */ jsxs68("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
         /* @__PURE__ */ jsx78(
           SiconBilling4,
           {
@@ -5486,8 +5506,8 @@ var ScPlanDetailsCardMobile = ({
       )
     ] }),
     /* @__PURE__ */ jsx78("div", { className: ScPlanDetailsCardMobile_default.divider }),
-    /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
-      /* @__PURE__ */ jsxs67("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
+    /* @__PURE__ */ jsxs68("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: [
+      /* @__PURE__ */ jsxs68("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
         /* @__PURE__ */ jsx78("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
         /* @__PURE__ */ jsx78("div", { className: ScPlanDetailsCardMobile_default.dot }),
         /* @__PURE__ */ jsx78("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })

package/package.json

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