@streamoid/ui 0.1.1 → 0.1.5

package/dist/index.js

@@ -2799,11 +2799,11 @@ var require_react_jsx_runtime_development = __commonJS({
             return jsxWithValidation(type, props, key, false);
           }
         }
-        var jsx106 = jsxWithValidationDynamic;
-        var jsxs56 = jsxWithValidationStatic;
+        var jsx105 = jsxWithValidationDynamic;
+        var jsxs57 = jsxWithValidationStatic;
         exports.Fragment = REACT_FRAGMENT_TYPE;
-        exports.jsx = jsx106;
-        exports.jsxs = jsxs56;
+        exports.jsx = jsx105;
+        exports.jsxs = jsxs57;
       })();
     }
   }
@@ -3597,6 +3597,7 @@ var ScHeader = ({
     "div",
     {
       className: ScHeader_default.scHeader + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ScHeader_default.headerText, children: [
           text,
@@ -3682,15 +3683,35 @@ var ScBillingLogsTableList_default = {
 // src/SC-Billing logs table list/ScBillingLogsTableList.tsx
 var import_jsx_runtime51 = __toESM(require_jsx_runtime());
 var ScBillingLogsTableList = ({
+  activity = "Artifax Generation",
+  usedBy = "Rohan",
+  date = "Nov 9th, 2025",
+  creditsUsed = "50",
+  balance = "84,902",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.scBillingLogsTableList + " " + className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ScBillingLogsTableList_default.customerName, children: "Artifax Generation " }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ScBillingLogsTableList_default.userName, children: "Rohan " }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ScBillingLogsTableList_default.date, children: "Nov 9th, 2025 " }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ScBillingLogsTableList_default.usage, children: "50 " }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ScBillingLogsTableList_default.cost, children: "84,902 " })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.scBillingLogsTableList + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.customerName, children: [
+      activity,
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.userName, children: [
+      usedBy,
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.date, children: [
+      date,
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.usage, children: [
+      creditsUsed,
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ScBillingLogsTableList_default.cost, children: [
+      balance,
+      " "
+    ] })
   ] });
 };
 
@@ -3730,19 +3751,25 @@ var ScRadio = ({
 }) => {
   const variantsClassName = ScRadio_default["state-" + state];
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    "svg",
+    "div",
     {
       className: ScRadio_default.scRadio + " " + className + " " + variantsClassName,
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-        "path",
+        "svg",
         {
-          d: "M22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5V24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24V22.5C17.799 22.5 22.5 17.799 22.5 12Z",
-          fill: "var(--alias-text-and-icons-muted, #7a7a7a)"
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            "path",
+            {
+              d: "M22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5V24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24V22.5C17.799 22.5 22.5 17.799 22.5 12Z",
+              fill: "var(--alias-text-and-icons-muted, #7a7a7a)"
+            }
+          )
         }
       )
     }
@@ -3767,19 +3794,25 @@ var ScCheckbox = ({
 }) => {
   const variantsClassName = ScCheckbox_default["state-" + state];
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-    "svg",
+    "div",
     {
       className: ScCheckbox_default.scCheckbox + " " + className + " " + variantsClassName,
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        "path",
+        "svg",
         {
-          d: "M17.5996 22.5V24H6.40039V22.5H17.5996ZM22.5 17.5996V6.40039C22.5 5.25553 22.4985 4.48629 22.4502 3.89453C22.4033 3.32077 22.3198 3.04631 22.2275 2.86523C21.9879 2.39483 21.6052 2.01214 21.1348 1.77246C20.9537 1.68023 20.6792 1.59671 20.1055 1.5498C19.5137 1.50146 18.7445 1.5 17.5996 1.5H6.40039C5.25553 1.5 4.48629 1.50146 3.89453 1.5498C3.32077 1.59671 3.04631 1.68023 2.86523 1.77246C2.39483 2.01214 2.01214 2.39483 1.77246 2.86523C1.68023 3.04631 1.59671 3.32077 1.5498 3.89453C1.50146 4.48629 1.5 5.25553 1.5 6.40039V17.5996C1.5 18.7445 1.50146 19.5137 1.5498 20.1055C1.59671 20.6792 1.68023 20.9537 1.77246 21.1348C2.01214 21.6052 2.39483 21.9879 2.86523 22.2275C3.04631 22.3198 3.32077 22.4033 3.89453 22.4502C4.48629 22.4985 5.25553 22.5 6.40039 22.5V24L4.91602 23.9932C3.72431 23.9744 2.96088 23.9041 2.34766 23.6406L2.18359 23.5645C1.52512 23.2289 0.974134 22.7183 0.589844 22.0918L0.435547 21.8164C-0.000427067 20.9608 1.63278e-09 19.8398 1.63278e-09 17.5996V6.40039C1.63278e-09 4.16018 -0.000427067 3.03924 0.435547 2.18359C0.819016 1.43109 1.43109 0.819016 2.18359 0.435547C2.82525 0.108606 3.61607 0.0272847 4.91602 0.00683594L6.40039 1.63278e-09H17.5996C19.8398 1.63278e-09 20.9608 -0.000427067 21.8164 0.435547C22.5689 0.819016 23.181 1.43109 23.5645 2.18359C24.0004 3.03924 24 4.16018 24 6.40039V17.5996C24 19.8398 24.0004 20.9608 23.5645 21.8164L23.4102 22.0918C23.0259 22.7183 22.4749 23.2289 21.8164 23.5645L21.6523 23.6406C20.816 23.9999 19.6999 24 17.5996 24V22.5C18.7445 22.5 19.5137 22.4985 20.1055 22.4502C20.6792 22.4033 20.9537 22.3198 21.1348 22.2275C21.6052 21.9879 21.9879 21.6052 22.2275 21.1348C22.3198 20.9537 22.4033 20.6792 22.4502 20.1055C22.4985 19.5137 22.5 18.7445 22.5 17.5996Z",
-          fill: "var(--alias-text-and-icons-muted, #7a7a7a)"
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            "path",
+            {
+              d: "M17.5996 22.5V24H6.40039V22.5H17.5996ZM22.5 17.5996V6.40039C22.5 5.25553 22.4985 4.48629 22.4502 3.89453C22.4033 3.32077 22.3198 3.04631 22.2275 2.86523C21.9879 2.39483 21.6052 2.01214 21.1348 1.77246C20.9537 1.68023 20.6792 1.59671 20.1055 1.5498C19.5137 1.50146 18.7445 1.5 17.5996 1.5H6.40039C5.25553 1.5 4.48629 1.50146 3.89453 1.5498C3.32077 1.59671 3.04631 1.68023 2.86523 1.77246C2.39483 2.01214 2.01214 2.39483 1.77246 2.86523C1.68023 3.04631 1.59671 3.32077 1.5498 3.89453C1.50146 4.48629 1.5 5.25553 1.5 6.40039V17.5996C1.5 18.7445 1.50146 19.5137 1.5498 20.1055C1.59671 20.6792 1.68023 20.9537 1.77246 21.1348C2.01214 21.6052 2.39483 21.9879 2.86523 22.2275C3.04631 22.3198 3.32077 22.4033 3.89453 22.4502C4.48629 22.4985 5.25553 22.5 6.40039 22.5V24L4.91602 23.9932C3.72431 23.9744 2.96088 23.9041 2.34766 23.6406L2.18359 23.5645C1.52512 23.2289 0.974134 22.7183 0.589844 22.0918L0.435547 21.8164C-0.000427067 20.9608 1.63278e-09 19.8398 1.63278e-09 17.5996V6.40039C1.63278e-09 4.16018 -0.000427067 3.03924 0.435547 2.18359C0.819016 1.43109 1.43109 0.819016 2.18359 0.435547C2.82525 0.108606 3.61607 0.0272847 4.91602 0.00683594L6.40039 1.63278e-09H17.5996C19.8398 1.63278e-09 20.9608 -0.000427067 21.8164 0.435547C22.5689 0.819016 23.181 1.43109 23.5645 2.18359C24.0004 3.03924 24 4.16018 24 6.40039V17.5996C24 19.8398 24.0004 20.9608 23.5645 21.8164L23.4102 22.0918C23.0259 22.7183 22.4749 23.2289 21.8164 23.5645L21.6523 23.6406C20.816 23.9999 19.6999 24 17.5996 24V22.5C18.7445 22.5 19.5137 22.4985 20.1055 22.4502C20.6792 22.4033 20.9537 22.3198 21.1348 22.2275C21.6052 21.9879 21.9879 21.6052 22.2275 21.1348C22.3198 20.9537 22.4033 20.6792 22.4502 20.1055C22.4985 19.5137 22.5 18.7445 22.5 17.5996Z",
+              fill: "var(--alias-text-and-icons-muted, #7a7a7a)"
+            }
+          )
         }
       )
     }
@@ -3827,22 +3860,44 @@ var ScPairtext = ({
 // src/SC-BillingHistoryTableList/ScBillingHistoryTableList.tsx
 var import_jsx_runtime55 = __toESM(require_jsx_runtime());
 var ScBillingHistoryTableList = ({
+  invoiceNumber = "# INV-2800-2026",
+  amount = "$320.89",
+  date = "Nov 9th, 2025",
+  downloadLabel = "Download invoice",
   className,
+  onRowClick,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: ScBillingHistoryTableList_default.scBillingHistoryTableList + " " + className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: ScBillingHistoryTableList_default.invoiceNumber, children: "# INV-2800-2026 " }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: ScBillingHistoryTableList_default.amount, children: "$320.89 " }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: ScBillingHistoryTableList_default.date, children: "Nov 9th, 2025 " }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      ScPairtext,
-      {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(sicon_download_default, { className: ScBillingHistoryTableList_default.siconDownloadInstance }),
-        content: "Download invoice",
-        className: ScBillingHistoryTableList_default.scPairtextInstance
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    "div",
+    {
+      className: ScBillingHistoryTableList_default.scBillingHistoryTableList + " " + className,
+      onClick: onRowClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: ScBillingHistoryTableList_default.invoiceNumber, children: [
+          invoiceNumber,
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: ScBillingHistoryTableList_default.amount, children: [
+          amount,
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: ScBillingHistoryTableList_default.date, children: [
+          date,
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          ScPairtext,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(sicon_download_default, { className: ScBillingHistoryTableList_default.siconDownloadInstance }),
+            content: downloadLabel,
+            className: ScBillingHistoryTableList_default.scPairtextInstance
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/SC-Button/ScButton.module.css
@@ -3889,6 +3944,7 @@ var ScButton = ({
     "div",
     {
       className: ScButton_default.scButton + " " + className + " " + variantsClassName,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: ScButton_default.container, children: [
         (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: icon }),
         (styleVariant === "default" || styleVariant === "icon-right" || styleVariant === "icon-left") && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: ScButton_default.label, children: [
@@ -4004,6 +4060,7 @@ var ScCalendarDateComps = ({
     "div",
     {
       className: ScCalendarDateComps_default.scCalendarDateComps + " " + className + " " + variantsClassName,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: ScCalendarDateComps_default.date, children: [
         date,
         " "
@@ -4014,240 +4071,112 @@ var ScCalendarDateComps = ({
 
 // src/SC-Calendar/ScCalendar.tsx
 var import_jsx_runtime59 = __toESM(require_jsx_runtime());
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
 var ScCalendar = ({
   className,
+  month,
+  year,
+  selectedDate,
+  onDateSelect,
+  onMonthChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScCalendar_default.scCalendar + " " + className, children: [
+  const today = /* @__PURE__ */ new Date();
+  const currentMonth = month !== void 0 ? month : today.getMonth();
+  const currentYear = year !== void 0 ? year : today.getFullYear();
+  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
+  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+  const totalCells = Math.ceil((firstDayOfMonth + daysInMonth) / 7) * 7;
+  const handlePrevMonth = () => {
+    const newMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+    const newYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+    onMonthChange?.(newMonth, newYear);
+  };
+  const handleNextMonth = () => {
+    const newMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+    const newYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+    onMonthChange?.(newMonth, newYear);
+  };
+  const getDateState = (dayIndex) => {
+    if (dayIndex < firstDayOfMonth || dayIndex >= firstDayOfMonth + daysInMonth) {
+      return "empty";
+    }
+    const dayNumber = dayIndex - firstDayOfMonth + 1;
+    const cellDate = new Date(currentYear, currentMonth, dayNumber);
+    if (today.getDate() === dayNumber && today.getMonth() === currentMonth && today.getFullYear() === currentYear) {
+      return "today";
+    }
+    if (selectedDate) {
+      const sel = selectedDate;
+      if (sel.getDate() === dayNumber && sel.getMonth() === currentMonth && sel.getFullYear() === currentYear) {
+        return "range-start";
+      }
+    }
+    return "default";
+  };
+  const getDayNumber = (dayIndex) => {
+    if (dayIndex < firstDayOfMonth || dayIndex >= firstDayOfMonth + daysInMonth) {
+      return "";
+    }
+    return String(dayIndex - firstDayOfMonth + 1);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScCalendar_default.scCalendar + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScCalendar_default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ScCalendar_default.monthYear, children: "February 2026 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScCalendar_default.monthYear, children: [
+        MONTH_NAMES[currentMonth],
+        " ",
+        currentYear
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScCalendar_default.navigation, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(sicon_left_default, { className: ScCalendar_default.siconLeftInstance }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(sicon_right_default, { className: ScCalendar_default.siconRightInstance })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          sicon_left_default,
+          {
+            className: ScCalendar_default.siconLeftInstance,
+            onClick: handlePrevMonth,
+            style: { cursor: "pointer" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          sicon_right_default,
+          {
+            className: ScCalendar_default.siconRightInstance,
+            onClick: handleNextMonth,
+            style: { cursor: "pointer" }
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ScHDivider, { className: ScCalendar_default.scHDividerInstance }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ScCalendar_default.calendarGrid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "empty",
-          className: ScCalendar_default.scCalendarDateCompsInstance
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "empty",
-          className: ScCalendar_default.scCalendarDateCompsInstance2
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance3
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "today",
-          className: ScCalendar_default.scCalendarDateCompsInstance4
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "hover",
-          className: ScCalendar_default.scCalendarDateCompsInstance5
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance6
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance7
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "range-end",
-          className: ScCalendar_default.scCalendarDateCompsInstance8
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance9
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance10
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance11
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance12
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance13
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "range-start",
-          className: ScCalendar_default.scCalendarDateCompsInstance14
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance15
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance16
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance17
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance18
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance19
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance20
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "range",
-          className: ScCalendar_default.scCalendarDateCompsInstance21
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance22
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance23
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "range",
-          className: ScCalendar_default.scCalendarDateCompsInstance24
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance25
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          state: "range",
-          className: ScCalendar_default.scCalendarDateCompsInstance26
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance27
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance28
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance29
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance30
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance31
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance32
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance33
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ScCalendarDateComps,
-        {
-          className: ScCalendar_default.scCalendarDateCompsInstance34
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ScCalendar_default.calendarGrid, children: Array.from({ length: totalCells }, (_, i) => {
+      const state = getDateState(i);
+      const dayNumber = getDayNumber(i);
+      const dayNum = dayNumber ? parseInt(dayNumber, 10) : null;
+      const cellDate = dayNum !== null ? new Date(currentYear, currentMonth, dayNum) : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         ScCalendarDateComps,
         {
-          className: ScCalendar_default.scCalendarDateCompsInstance35
-        }
-      )
-    ] })
+          date: dayNumber || "",
+          state,
+          className: ScCalendar_default.scCalendarDateCompsInstance,
+          onClick: cellDate && state !== "empty" ? () => onDateSelect?.(cellDate) : void 0,
+          style: cellDate && state !== "empty" ? { cursor: "pointer" } : void 0
+        },
+        i
+      );
+    }) })
   ] });
 };
 
@@ -4273,39 +4202,64 @@ var ScProgressBar_default = {
 // src/SC-Progress bar/ScProgressBar.tsx
 var import_jsx_runtime60 = __toESM(require_jsx_runtime());
 var ScProgressBar = ({
+  progress = 50,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: ScProgressBar_default.scProgressBar + " " + className, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: ScProgressBar_default.progressFill }) });
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: ScProgressBar_default.scProgressBar + " " + className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "div",
+    {
+      className: ScProgressBar_default.progressFill,
+      style: { width: `${clampedProgress}%` }
+    }
+  ) });
 };
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
 var import_jsx_runtime61 = __toESM(require_jsx_runtime());
 var ScCreditsUsageCard = ({
+  usageLabel = "Credits usage",
+  usageText = "8,450 / 30,000",
+  remainingText = "60% Remaining",
+  buyButtonText = "Buy credits",
+  progress = 60,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ScCreditsUsageCard_default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         ScPairtext,
         {
           icon: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(sicon_Coins_default, { className: ScCreditsUsageCard_default.siconCoinsInstance }),
-          content: "Credits usage",
+          content: usageLabel,
           className: ScCreditsUsageCard_default.scPairtextInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: ScCreditsUsageCard_default.usageText, children: "8,450 / 30,000 " })
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ScCreditsUsageCard_default.usageText, children: [
+        usageText,
+        " "
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ScHDivider, { className: ScCreditsUsageCard_default.scHDividerInstance }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ScCreditsUsageCard_default.progressContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ScProgressBar, { className: ScCreditsUsageCard_default.scProgressBarInstance }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: ScCreditsUsageCard_default.remainingText, children: "60% Remaining " }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        ScProgressBar,
+        {
+          progress,
+          className: ScCreditsUsageCard_default.scProgressBarInstance
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ScCreditsUsageCard_default.remainingText, children: [
+        remainingText,
+        " "
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         ScButton,
         {
           icon: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(sicon_Home_default, { className: ScCreditsUsageCard_default.siconHomeInstance }),
-          text: "Buy credits",
+          text: buyButtonText,
           variant: "secondary",
           size: "md",
           className: ScCreditsUsageCard_default.scButtonInstance
@@ -4327,6 +4281,8 @@ var ScGoogleSignIn_default = {
 var import_jsx_runtime62 = __toESM(require_jsx_runtime());
 var ScGoogleSignIn = ({
   hover = "false",
+  googleLogoSrc = "google-logo0.png",
+  signInText = "Sign in with Google",
   className,
   ...props
 }) => {
@@ -4335,9 +4291,13 @@ var ScGoogleSignIn = ({
     "div",
     {
       className: ScGoogleSignIn_default.scGoogleSignIn + " " + className + " " + variantsClassName,
+      ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { className: ScGoogleSignIn_default.googleLogo, src: "google-logo0.png" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: ScGoogleSignIn_default.signInText, children: "Sign in with Google " })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { className: ScGoogleSignIn_default.googleLogo, src: googleLogoSrc }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ScGoogleSignIn_default.signInText, children: [
+          signInText,
+          " "
+        ] })
       ]
     }
   );
@@ -4558,6 +4518,7 @@ var ScMenuOptions = ({
     "div",
     {
       className: ScMenuOptions_default.scMenuOptions + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         icon,
         /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ScMenuOptions_default.content, children: [
@@ -4583,13 +4544,15 @@ var ScOnlyIcon_default = {
 var import_jsx_runtime67 = __toESM(require_jsx_runtime());
 var ScOnlyIcon = ({
   variant = "default",
-  className
+  className,
+  ...props
 }) => {
   const variantsClassName = ScOnlyIcon_default["variant-" + variant];
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "div",
     {
       className: ScOnlyIcon_default.scOnlyIcon + " " + className + " " + variantsClassName,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(sicon_settings_default, { className: ScOnlyIcon_default.siconSettingsInstance })
     }
   );
@@ -4815,23 +4778,28 @@ var ScPlanDetailsCard_default = {
 // src/SC-Plan details card/ScPlanDetailsCard.tsx
 var import_jsx_runtime69 = __toESM(require_jsx_runtime());
 var ScPlanDetailsCard = ({
+  planName = "Free",
+  planPrice = "$0.00 / month",
+  badgeText = "Active",
+  currentPlanLabel = "Current plan",
+  upgradeButtonText = "Upgrade",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.scPlanDetailsCard + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.scPlanDetailsCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.planHeader, children: [
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         ScPairtext,
         {
           icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(sicon_billing_default, { className: ScPlanDetailsCard_default.siconBillingInstance }),
-          content: "Current plan",
+          content: currentPlanLabel,
           className: ScPlanDetailsCard_default.scPairtextInstance
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         ScBadges,
         {
-          text: "Active",
+          text: badgeText,
           variant: "success",
           styleVariant: "opaque",
           className: ScPlanDetailsCard_default.scBadgesInstance
@@ -4841,14 +4809,20 @@ var ScPlanDetailsCard = ({
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ScHDivider, { className: ScPlanDetailsCard_default.scHDividerInstance }),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.planDetails, children: [
       /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.planInfo, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScPlanDetailsCard_default.planName, children: "Free " }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: ScPlanDetailsCard_default.planPrice, children: "$0.00 / month " })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.planName, children: [
+          planName,
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: ScPlanDetailsCard_default.planPrice, children: [
+          planPrice,
+          " "
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         ScButton,
         {
           icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(sicon_Home_default, { className: ScPlanDetailsCard_default.siconHomeInstance }),
-          text: "Upgrade",
+          text: upgradeButtonText,
           size: "md",
           className: ScPlanDetailsCard_default.scButtonInstance
         }
@@ -4873,6 +4847,7 @@ var ScProfile = ({
   name = "Chris Hemsworth",
   subText = "Kepler workspace",
   collapsed = "false",
+  profileImage = "profile-image0.png",
   className,
   ...props
 }) => {
@@ -4881,8 +4856,9 @@ var ScProfile = ({
     "div",
     {
       className: ScProfile_default.scProfile + " " + className + " " + variantsClassName,
+      ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("img", { className: ScProfile_default.profileImage, src: "profile-image0.png" }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("img", { className: ScProfile_default.profileImage, src: profileImage }),
         collapsed === "false" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: ScProfile_default.userInfo, children: [
           /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: ScProfile_default.userName, children: [
             name,
@@ -4943,9 +4919,10 @@ var ScVDivider = ({
 // src/SC-Profile Image update/ScProfileImageUpdate.tsx
 var import_jsx_runtime72 = __toESM(require_jsx_runtime());
 var ScProfileImageUpdate = ({
-  className
+  className,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: ScProfileImageUpdate_default.scProfileImageUpdate + " " + className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: ScProfileImageUpdate_default.buttonContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       ScButton,
       {
@@ -5005,6 +4982,9 @@ var ScWorkspace_default = {
 var import_jsx_runtime73 = __toESM(require_jsx_runtime());
 var ScWorkspace = ({
   collapsed = "false",
+  workspaceName = "Kepler",
+  userRole = "Admin",
+  profileImage = "profile-image0.png",
   className,
   ...props
 }) => {
@@ -5013,11 +4993,18 @@ var ScWorkspace = ({
     "div",
     {
       className: ScWorkspace_default.scWorkspace + " " + className + " " + variantsClassName,
+      ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { className: ScWorkspace_default.profileImage, src: "profile-image0.png" }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { className: ScWorkspace_default.profileImage, src: profileImage }),
         collapsed === "false" && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: ScWorkspace_default.userInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: ScWorkspace_default.userName, children: "Kepler " }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: ScWorkspace_default.userRole, children: "Admin " })
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: ScWorkspace_default.userName, children: [
+            workspaceName,
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: ScWorkspace_default.userRole, children: [
+            userRole,
+            " "
+          ] })
         ] }) })
       ]
     }
@@ -5050,6 +5037,7 @@ var ScTabComp = ({
     "div",
     {
       className: ScTabComp_default.scTabComp + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         type === "icon-only" && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: ScTabComp_default.icon, children: icon }) }),
         type === "text-only" && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: ScTabComp_default.textContainer, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: ScTabComp_default.tabText, children: [
@@ -5084,6 +5072,7 @@ var ScTabSwitcher = ({
     "div",
     {
       className: ScTabSwitcher_default.scTabSwitcher + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         component ? component : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           ScTabComp,
@@ -5132,7 +5121,7 @@ var ScProfileOptions = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ScProfileOptions_default.scProfileOptions + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ScProfileOptions_default.scProfileOptions + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: ScProfileOptions_default.profileHeader, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ScProfile, { className: ScProfileOptions_default.scProfileInstance }) }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ScHDivider, { className: ScProfileOptions_default.scHDividerInstance }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ScProfileOptions_default.profileDetails, children: [
@@ -5297,10 +5286,14 @@ var ScTextField = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: ScTextField_default.inputContainer, children: [
           (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children: tfLeftIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: ScTextField_default.inputText, children: [
-            placeholderFilled,
-            " "
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            "input",
+            {
+              className: ScTextField_default.inputText,
+              placeholder: placeholderFilled,
+              ...props
+            }
+          ),
           (tfGroup === "icon-right" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children: tfRightIcon })
         ] })
       ]
@@ -5311,9 +5304,13 @@ var ScTextField = ({
 // src/SC-ProfileSettingsComp/ScProfileSettingsComp.tsx
 var import_jsx_runtime78 = __toESM(require_jsx_runtime());
 var ScProfileSettingsComp = ({
-  className
+  firstName = "Chris",
+  lastName = "Hemsworth",
+  email = "chris@kepler.com",
+  className,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: ScProfileSettingsComp_default.scProfileSettingsComp + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: ScProfileSettingsComp_default.scProfileSettingsComp + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       ScProfileImageUpdate,
       {
@@ -5327,7 +5324,7 @@ var ScProfileSettingsComp = ({
           {
             tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(sicon_bolt_default, { className: ScProfileSettingsComp_default.siconBoltInstance }),
             tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(sicon_bolt_default, { className: ScProfileSettingsComp_default.siconBoltInstance }),
-            placeholderFilled: "Chris",
+            placeholderFilled: firstName,
             label: "First Name",
             state: "filled",
             tfGroup: "none",
@@ -5339,7 +5336,7 @@ var ScProfileSettingsComp = ({
           {
             tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(sicon_bolt_default, { className: ScProfileSettingsComp_default.siconBoltInstance }),
             tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(sicon_bolt_default, { className: ScProfileSettingsComp_default.siconBoltInstance }),
-            placeholderFilled: "Hemsworth",
+            placeholderFilled: lastName,
             label: "Last Name",
             state: "filled",
             tfGroup: "none",
@@ -5352,7 +5349,7 @@ var ScProfileSettingsComp = ({
         {
           tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(sicon_bolt_default, { className: ScProfileSettingsComp_default.siconBoltInstance }),
           tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(sicon_lock_default, { className: ScProfileSettingsComp_default.siconLockInstance }),
-          placeholderFilled: "chris@kepler.com",
+          placeholderFilled: email,
           label: "Email ID",
           className: ScProfileSettingsComp_default.scTextFieldInstance2
         }
@@ -5372,11 +5369,23 @@ var ScRole_default = {
 var import_jsx_runtime79 = __toESM(require_jsx_runtime());
 var ScRole = ({
   type = "admin",
+  label,
   className,
   ...props
 }) => {
   const variantsClassName = ScRole_default["type-" + type];
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: ScRole_default.scRole + " " + className + " " + variantsClassName, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: ScRole_default.role, children: "Admin " }) });
+  const displayLabel = label ?? (type === "admin" ? "Admin" : "Member");
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    "div",
+    {
+      className: ScRole_default.scRole + " " + className + " " + variantsClassName,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ScRole_default.role, children: [
+        displayLabel,
+        " "
+      ] })
+    }
+  );
 };
 
 // src/SC-Sidebar/ScSidebar.module.css
@@ -5431,6 +5440,7 @@ var ScSidebarMenu = ({
     "div",
     {
       className: ScSidebarMenu_default.scSidebarMenu + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         icon,
         variant === "explanded" && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: ScSidebarMenu_default.content, children: [
@@ -5463,6 +5473,7 @@ var ScSidebarProfile = ({
     "div",
     {
       className: ScSidebarProfile_default.scSidebarProfile + " " + className + " " + variantsClassName,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ScProfile, { className: ScSidebarProfile_default.scProfileInstance })
     }
   );
@@ -5505,6 +5516,7 @@ var ScVersion_default = {
 var import_jsx_runtime83 = __toESM(require_jsx_runtime());
 var ScVersion = ({
   state = "expanded",
+  version = "v2.1.2",
   scSidebarIconsinstance,
   component,
   className,
@@ -5515,6 +5527,7 @@ var ScVersion = ({
     "div",
     {
       className: ScVersion_default.scVersion + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         state === "collapsed" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_jsx_runtime83.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: ScVersion_default.icon, children: component ? component : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           ScSidebarIcons,
@@ -5523,7 +5536,10 @@ var ScVersion = ({
             className: ScVersion_default.scSidebarIconsInstance
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: ScVersion_default.content, children: "v2.1.2 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: ScVersion_default.content, children: [
+          version,
+          " "
+        ] }),
         state === "expanded" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_jsx_runtime83.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           ScSidebarIcons,
           {
@@ -5542,6 +5558,7 @@ var import_jsx_runtime84 = __toESM(require_jsx_runtime());
 var ScSidebar = ({
   state = "expanded",
   className,
+  onToggle,
   ...props
 }) => {
   const variantsClassName = ScSidebar_default["state-" + state];
@@ -5840,9 +5857,10 @@ var ScSlider_default = {
 var import_jsx_runtime85 = __toESM(require_jsx_runtime());
 var ScSlider = ({
   className,
+  onValueChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScSlider_default.scSlider + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScSlider_default.scSlider + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressDot }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScSlider_default.progressBar2 }),
@@ -5874,7 +5892,7 @@ var ScAppListingCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.scAppListingCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScAppListingCard_default.iconContainer, children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScAppListingCard_default.title, children: [
@@ -5907,7 +5925,7 @@ var ScAppCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.scAppCard + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.scAppCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScAppCard_default.iconContainer, children: appIcon }),
     /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.textContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScAppCard_default.title, children: [
@@ -5957,38 +5975,44 @@ var ScToggleSwitch = ({
   ...props
 }) => {
   const variantsClassName = ScToggleSwitch_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-    "svg",
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    "div",
     {
       className: ScToggleSwitch_default.scToggleSwitch + " " + className + " " + variantsClassName,
-      width: "41",
-      height: "25",
-      viewBox: "0 0 41 25",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          "path",
-          {
-            d: "M0.25 12.25C0.25 5.62258 5.62258 0.25 12.25 0.25H28.25C34.8774 0.25 40.25 5.62258 40.25 12.25C40.25 18.8774 34.8774 24.25 28.25 24.25H12.25C5.62258 24.25 0.25 18.8774 0.25 12.25Z",
-            fill: "var(--alias-fill-neutral-neutral, #1a1a1a)"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          "path",
-          {
-            d: "M40 12.25C40 5.76065 34.7393 0.5 28.25 0.5H12.25C5.76065 0.5 0.5 5.76065 0.5 12.25C0.5 18.7393 5.76065 24 12.25 24H28.25C34.7393 24 40 18.7393 40 12.25ZM40.5 12.25C40.5 19.0155 35.0155 24.5 28.25 24.5H12.25C5.48451 24.5 0 19.0155 0 12.25C0 5.48451 5.48451 0 12.25 0H28.25C35.0155 0 40.5 5.48451 40.5 12.25Z",
-            fill: "var(--alias-border-divider, #242424)"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          "path",
-          {
-            d: "M2.25 12.25C2.25 6.72715 6.72715 2.25 12.25 2.25C17.7728 2.25 22.25 6.72715 22.25 12.25C22.25 17.7728 17.7728 22.25 12.25 22.25C6.72715 22.25 2.25 17.7728 2.25 12.25Z",
-            fill: "var(--alias-fill-neutral-neutralactive, #313131)"
-          }
-        )
-      ]
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+        "svg",
+        {
+          width: "41",
+          height: "25",
+          viewBox: "0 0 41 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "path",
+              {
+                d: "M0.25 12.25C0.25 5.62258 5.62258 0.25 12.25 0.25H28.25C34.8774 0.25 40.25 5.62258 40.25 12.25C40.25 18.8774 34.8774 24.25 28.25 24.25H12.25C5.62258 24.25 0.25 18.8774 0.25 12.25Z",
+                fill: "var(--alias-fill-neutral-neutral, #1a1a1a)"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "path",
+              {
+                d: "M40 12.25C40 5.76065 34.7393 0.5 28.25 0.5H12.25C5.76065 0.5 0.5 5.76065 0.5 12.25C0.5 18.7393 5.76065 24 12.25 24H28.25C34.7393 24 40 18.7393 40 12.25ZM40.5 12.25C40.5 19.0155 35.0155 24.5 28.25 24.5H12.25C5.48451 24.5 0 19.0155 0 12.25C0 5.48451 5.48451 0 12.25 0H28.25C35.0155 0 40.5 5.48451 40.5 12.25Z",
+                fill: "var(--alias-border-divider, #242424)"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "path",
+              {
+                d: "M2.25 12.25C2.25 6.72715 6.72715 2.25 12.25 2.25C17.7728 2.25 22.25 6.72715 22.25 12.25C22.25 17.7728 17.7728 22.25 12.25 22.25C6.72715 22.25 2.25 17.7728 2.25 12.25Z",
+                fill: "var(--alias-fill-neutral-neutralactive, #313131)"
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };
@@ -5997,6 +6021,9 @@ var ScToggleSwitch = ({
 var import_jsx_runtime89 = __toESM(require_jsx_runtime());
 var ScArtifaxInvite = ({
   active = "true",
+  appName = "Artifax",
+  appDescription = "Info about artifax",
+  appIcon,
   className,
   ...props
 }) => {
@@ -6005,11 +6032,14 @@ var ScArtifaxInvite = ({
     "div",
     {
       className: ScArtifaxInvite_default.scArtifaxInvite + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           ScAppCard,
           {
-            appIcon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(sicon_artifacts_default, { className: ScArtifaxInvite_default.siconArtifactsInstance }),
+            appIcon: appIcon || /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(sicon_artifacts_default, { className: ScArtifaxInvite_default.siconArtifactsInstance }),
+            appName,
+            appDescription,
             className: ScArtifaxInvite_default.scAppCardInstance
           }
         ),
@@ -6115,6 +6145,7 @@ var ScOnlyField = ({
     "div",
     {
       className: ScOnlyField_default.scOnlyField + " " + className + " " + variantsClassName,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScOnlyField_default.inputContainer, children: [
         (tfGroup === "icon-left" || tfGroup === "icon-left-right") && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children: tfLeftIcon }),
         /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScOnlyField_default.inputText, children: [
@@ -6131,6 +6162,12 @@ var ScOnlyField = ({
 var import_jsx_runtime92 = __toESM(require_jsx_runtime());
 var ScCatalogixInvite = ({
   active = "false",
+  appName = "Catalogix",
+  appDescription = "Info about catalogix",
+  storeAccessTitle = "Store access",
+  selectedCount = "0 Selected",
+  searchPlaceholder = "Search stores...",
+  appIcon,
   className,
   ...props
 }) => {
@@ -6139,14 +6176,15 @@ var ScCatalogixInvite = ({
     "div",
     {
       className: ScCatalogixInvite_default.scCatalogixInvite + " " + className + " " + variantsClassName,
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.appHeader, children: [
           /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             ScAppCard,
             {
-              appIcon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_artifacts_default, { className: ScCatalogixInvite_default.siconArtifactsInstance }),
-              appDescription: "Info about catalogix",
-              appName: "Catalogix",
+              appIcon: appIcon || /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_artifacts_default, { className: ScCatalogixInvite_default.siconArtifactsInstance }),
+              appDescription,
+              appName,
               className: ScCatalogixInvite_default.scAppCardInstance
             }
           ),
@@ -6160,15 +6198,21 @@ var ScCatalogixInvite = ({
         ] }),
         active === "true" && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_jsx_runtime92.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessContainer, children: [
           /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessHeader, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: "Store access " }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScCatalogixInvite_default.selectedCount, children: "0 Selected " })
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.storeAccessTitle, children: [
+              storeAccessTitle,
+              " "
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScCatalogixInvite_default.selectedCount, children: [
+              selectedCount,
+              " "
+            ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             ScOnlyField,
             {
               tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Search_default, { className: ScCatalogixInvite_default.siconSearchInstance }),
               tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(sicon_Search_default, { className: ScCatalogixInvite_default.siconSearchInstance }),
-              placeholderFilled: "Search stores...",
+              placeholderFilled: searchPlaceholder,
               className: ScCatalogixInvite_default.scOnlyFieldInstance
             }
           ),
@@ -6228,11 +6272,15 @@ var ScCatalogixInvite = ({
 // src/SC-appField/ScAppField.tsx
 var import_jsx_runtime93 = __toESM(require_jsx_runtime());
 var ScAppField = ({
+  appFieldTitle = "App permission",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.scAppField + " " + className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScAppField_default.title, children: "App permission " }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.scAppField + " " + className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScAppField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.title, children: [
+      appFieldTitle,
+      " "
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScAppField_default.inputContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
         ScArtifaxInvite,
@@ -6326,7 +6374,7 @@ var ScCheckField = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScCheckField_default.scCheckField + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScCheckField_default.scCheckField + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScCheckField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScCheckField_default.label, children: [
       label,
       " "
@@ -6377,6 +6425,7 @@ var ScFieldButton = ({
     "div",
     {
       className: ScFieldButton_default.scFieldButton + " " + className + " " + variantsClassName,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScFieldButton_default.container, children: [
         (type === "icon-right" || type === "only-icon") && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: icon }),
         (type === "icon-left" || type === "default" || type === "icon-right") && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScFieldButton_default.label, children: [
@@ -6402,7 +6451,7 @@ var ScPendingAction = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScPendingAction_default.scPendingAction + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScPendingAction_default.scPendingAction + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       ScButton,
       {
@@ -6443,17 +6492,27 @@ var ScQuickPrompt_default = {
 // src/SC-quick prompt/ScQuickPrompt.tsx
 var import_jsx_runtime98 = __toESM(require_jsx_runtime());
 var ScQuickPrompt = ({
-  className
+  appName = "Photogenix",
+  heading = "Swap Model and Background",
+  description = "Replace the current model and background with new ones that match my brand's aesthetic and tone.",
+  className,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.scQuickPrompt + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(sicon_bolt_default, { className: ScQuickPrompt_default.siconBoltInstance }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.title, children: "Photogenix " }) })
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.titleContainer, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.title, children: [
+        appName,
+        " "
+      ] }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.body, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScQuickPrompt_default.heading, children: "Swap Model and Background " }),
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.heading, children: [
+        heading,
+        " "
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScQuickPrompt_default.description, children: [
-        "Replace the current model and background with new ones that match my brand's aesthetic and tone.",
+        description,
         " "
       ] })
     ] })
@@ -6522,20 +6581,32 @@ var ScReferralTableList_default = {
 // src/SC-referralTableList/ScReferralTableList.tsx
 var import_jsx_runtime100 = __toESM(require_jsx_runtime());
 var ScReferralTableList = ({
+  userEmail = "chris@kepler.com",
+  userName,
+  date = "Nov 9th, 2025",
+  status = "Confirmed",
+  points = "+ 500",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.scReferralTableList + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       ScProfile,
       {
-        subText: "chris@kepler.com",
+        subText: userEmail,
+        name: userName,
         className: ScReferralTableList_default.scProfileInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScReferralTableList_default.date, children: "Nov 9th, 2025 " }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ScBadges, { text: "Confirmed", className: ScReferralTableList_default.scBadgesInstance }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScReferralTableList_default.points, children: "+ 500 " })
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.date, children: [
+      date,
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ScBadges, { text: status, className: ScReferralTableList_default.scBadgesInstance }),
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScReferralTableList_default.points, children: [
+      points,
+      " "
+    ] })
   ] });
 };
 
@@ -6551,7 +6622,7 @@ var ScSettingsNav = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScSettingsNav_default.container, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScSettingsNav_default.scSettingsNav + " " + className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScSettingsNav_default.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       ScSidebarMenu,
       {
@@ -6704,9 +6775,11 @@ var import_jsx_runtime104 = __toESM(require_jsx_runtime());
 var ScTableList = ({
   invitedBy = "Rohan",
   signedOn = "Nov 9th, 2025",
+  userEmail = "chris@kepler.com",
   hover = "false",
   variant = "active",
   className,
+  onRowClick,
   ...props
 }) => {
   const variantsClassName = ScTableList_default["hover-" + hover] + " " + ScTableList_default["variant-" + variant];
@@ -6714,11 +6787,13 @@ var ScTableList = ({
     "div",
     {
       className: ScTableList_default.scTableList + " " + className + " " + variantsClassName,
+      onClick: (e) => onRowClick && onRowClick(invitedBy, e),
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
           ScProfile,
           {
-            subText: "chris@kepler.com",
+            subText: userEmail,
             className: ScTableList_default.scProfileInstance
           }
         ),
@@ -6783,9 +6858,15 @@ var ScWorkspaceCard_default = {
 // src/SC-workspaceCard/ScWorkspaceCard.tsx
 var import_jsx_runtime105 = __toESM(require_jsx_runtime());
 var ScWorkspaceCard = ({
-  className
+  workspaceName = "Stores",
+  role = "Admin",
+  userCount = "12 Users",
+  ownerEmail = "rohan@streamoid.com",
+  buttonText = "Current workspace",
+  className,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.scWorkspaceCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.workspaceInfo, children: [
       /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
         ScIntialProfileCover,
@@ -6793,13 +6874,16 @@ var ScWorkspaceCard = ({
           className: ScWorkspaceCard_default.scIntialProfileCoverInstance
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: ScWorkspaceCard_default.workspaceName, children: "Stores " })
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.workspaceName, children: [
+        workspaceName,
+        " "
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScWorkspaceCard_default.userInfo, children: [
       /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
         ScBadges,
         {
-          text: "Admin",
+          text: role,
           variant: "info",
           className: ScWorkspaceCard_default.scBadgesInstance
         }
@@ -6809,7 +6893,7 @@ var ScWorkspaceCard = ({
           ScPairtext,
           {
             icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_team_default, { className: ScWorkspaceCard_default.siconTeamInstance }),
-            content: "12 Users",
+            content: userCount,
             className: ScWorkspaceCard_default.scPairtextInstance
           }
         ),
@@ -6818,7 +6902,7 @@ var ScWorkspaceCard = ({
           ScPairtext,
           {
             icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_Crown_default, { className: ScWorkspaceCard_default.siconCrownInstance }),
-            content: "rohan@streamoid.com",
+            content: ownerEmail,
             className: ScWorkspaceCard_default.scPairtextInstance
           }
         )
@@ -6828,7 +6912,7 @@ var ScWorkspaceCard = ({
       ScButton,
       {
         icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(sicon_switch_default, { className: ScWorkspaceCard_default.siconSwitchInstance }),
-        text: "Current workspace",
+        text: buttonText,
         state: "disabled",
         variant: "outline",
         className: ScWorkspaceCard_default.scButtonInstance