@streamoid/ui 0.6.12 → 0.6.13

package/dist/index.js

@@ -65,6 +65,7 @@ __export(index_exports, {
   ScImageField: () => ScImageField,
   ScInChatList: () => ScInChatList,
   ScInChatMessage: () => ScInChatMessage,
+  ScInfoPopup: () => ScInfoPopup,
   ScIntialProfileCover: () => ScIntialProfileCover,
   ScLogoUnit: () => ScLogoUnit,
   ScMediaApproval: () => ScMediaApproval,
@@ -72,8 +73,10 @@ __export(index_exports, {
   ScMenuOptions: () => ScMenuOptions,
   ScMobileBottomAction: () => ScMobileBottomAction,
   ScMobileTopNav: () => ScMobileTopNav,
+  ScModal: () => ScModal,
   ScOnlyField: () => ScOnlyField,
   ScOnlyIcon: () => ScOnlyIcon,
+  ScPagination: () => ScPagination,
   ScPairtext: () => ScPairtext,
   ScPendingAction: () => ScPendingAction,
   ScPhtogenixInvite: () => ScPhtogenixInvite,
@@ -854,8 +857,11 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 var ScCheckbox = ({
   state = "default",
   checked,
+  disabled = false,
   onChange,
   className,
+  style,
+  onClick,
   ...props
 }) => {
   const effectiveState = checked !== void 0 ? checked ? "selected" : "default" : state;
@@ -864,18 +870,100 @@ var ScCheckbox = ({
     "div",
     {
       className: ScCheckbox_default.scCheckbox + " " + className + " " + variantsClassName,
-      style: { cursor: "pointer", ...props.style },
-      ...props,
+      style: {
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...disabled ? { opacity: 0.5 } : {},
+        ...style
+      },
       onClick: (e) => {
+        if (disabled) return;
         onChange?.(
           checked !== void 0 ? !checked : effectiveState !== "selected"
         );
-        props.onClick?.(e);
+        onClick?.(e);
       },
-      children: effectiveState === "selected" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "24", height: "24", rx: "6", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M7.5 12L10.5 15L16.5 9", stroke: "var(--alias-text---icons-inverse, #101010)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "5.25", stroke: "var(--alias-border-default, #3e3e3e)", strokeWidth: "1.5" }) })
+      ...props,
+      children: effectiveState === "selected" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "rect",
+              {
+                width: "24",
+                height: "24",
+                rx: "6",
+                fill: "var(--alias-fill-base-base, #f5f5f5)"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "path",
+              {
+                d: "M7.5 12L10.5 15L16.5 9",
+                stroke: "var(--alias-text---icons-inverse, #101010)",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      ) : effectiveState === "partial" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "rect",
+              {
+                width: "24",
+                height: "24",
+                rx: "6",
+                fill: "var(--alias-fill-base-base, #f5f5f5)"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "path",
+              {
+                d: "M7.5 12H16.5",
+                stroke: "var(--alias-text---icons-inverse, #101010)",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "rect",
+            {
+              x: "0.75",
+              y: "0.75",
+              width: "22.5",
+              height: "22.5",
+              rx: "5.25",
+              stroke: "var(--alias-border-default, #3e3e3e)",
+              strokeWidth: "1.5"
+            }
+          )
+        }
+      )
     }
   );
 };
@@ -6002,6 +6090,7 @@ var import_jsx_runtime60 = require("react/jsx-runtime");
 var ScToggleSwitch = ({
   active = "false",
   checked,
+  disabled = false,
   onToggle,
   className,
   ...props
@@ -6014,10 +6103,15 @@ var ScToggleSwitch = ({
       className: ScToggleSwitch_default.scToggleSwitch + " " + className + " " + variantsClassName,
       ...props,
       onClick: (e) => {
+        if (disabled) return;
         onToggle?.(!isActive);
         props.onClick?.(e);
       },
-      style: { cursor: "pointer", ...props.style },
+      style: {
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...disabled ? { opacity: 0.5 } : {},
+        ...props.style
+      },
       children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", { width: "40", height: "24", viewBox: "0 0 40 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("rect", { width: "40", height: "24", rx: "12", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("circle", { cx: "28", cy: "12", r: "10", fill: "var(--alias-text---icons-inverse, #101010)" })
@@ -7238,6 +7332,263 @@ function ScWorkspaceSwitchCard({
 }
 var NscWorkspaceSwitch = ScWorkspaceSwitchCard;
 
+// src/SC-Modal/ScModal.tsx
+var import_react15 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/SC-Modal/ScModal.module.css
+var ScModal_default = {
+  backdrop: "ScModal_backdrop",
+  content: "ScModal_content"
+};
+
+// src/SC-Modal/ScModal.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var ScModal = ({
+  children,
+  onClose,
+  open = true,
+  className,
+  style,
+  contentClassName,
+  contentStyle,
+  closeOnBackdrop = true,
+  closeOnEsc = true
+}) => {
+  (0, import_react15.useEffect)(() => {
+    if (!open || !closeOnEsc) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, closeOnEsc, onClose]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      "div",
+      {
+        className: [ScModal_default.backdrop, className].filter(Boolean).join(" "),
+        style,
+        onMouseDown: (e) => {
+          if (closeOnBackdrop && e.target === e.currentTarget) onClose?.();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "div",
+          {
+            className: [ScModal_default.content, contentClassName].filter(Boolean).join(" "),
+            style: contentStyle,
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+
+// src/SC-InfoPopup/ScInfoPopup.tsx
+var import_react16 = require("react");
+var import_icons61 = require("@streamoid/icons");
+
+// src/SC-InfoPopup/ScInfoPopup.module.css
+var ScInfoPopup_default = {
+  scInfoPopup: "ScInfoPopup_scInfoPopup",
+  infoIcon: "ScInfoPopup_infoIcon",
+  content: "ScInfoPopup_content",
+  closeIconContainer: "ScInfoPopup_closeIconContainer",
+  closeIcon: "ScInfoPopup_closeIcon",
+  contentText: "ScInfoPopup_contentText"
+};
+
+// src/SC-InfoPopup/ScInfoPopup.tsx
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var ScInfoPopup = ({
+  content,
+  className
+}) => {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const ref = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+    "div",
+    {
+      className: ScInfoPopup_default.scInfoPopup + (className ? " " + className : ""),
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          "span",
+          {
+            className: ScInfoPopup_default.infoIcon,
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "More info",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(true);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+              "svg",
+              {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                    "circle",
+                    {
+                      cx: "9",
+                      cy: "9",
+                      r: "8",
+                      stroke: "var(--alias-text-and-icons-tertiary, #9e9e9e)",
+                      strokeWidth: "1.25"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                    "path",
+                    {
+                      d: "M9 8.25V12.75",
+                      stroke: "var(--alias-text-and-icons-tertiary, #9e9e9e)",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                    "circle",
+                    {
+                      cx: "9",
+                      cy: "5.25",
+                      r: "0.9",
+                      fill: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: ScInfoPopup_default.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "div",
+            {
+              className: ScInfoPopup_default.closeIconContainer,
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                import_icons61.SiconClose,
+                {
+                  size: 18,
+                  color: "var(--alias-text-and-icons-tertiary)",
+                  className: ScInfoPopup_default.closeIcon
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: ScInfoPopup_default.contentText, children: content })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/SC-Pagination/ScPagination.tsx
+var import_icons62 = require("@streamoid/icons");
+
+// src/SC-Pagination/ScPagination.module.css
+var ScPagination_default = {
+  scPagination: "ScPagination_scPagination",
+  section: "ScPagination_section",
+  leftArrow: "ScPagination_leftArrow",
+  page: "ScPagination_page",
+  pageCount: "ScPagination_pageCount"
+};
+
+// src/SC-Pagination/ScPagination.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var ScPagination = ({
+  itemsCount,
+  itemsPerPage,
+  page,
+  setPage,
+  setOffsetValue,
+  onPageChangeAction,
+  className
+}) => {
+  const perPage = parseInt(String(itemsPerPage), 10) || 1;
+  const maxPage = itemsCount % perPage ? Math.floor(itemsCount / perPage) + 1 : itemsCount / perPage;
+  const handlePageValue = (e) => {
+    const raw = e.target.value;
+    if (raw.length) {
+      const n = parseInt(raw, 10);
+      if (n < 1) setPage(1);
+      else if (n > maxPage) setPage(maxPage);
+      else setPage(raw);
+    } else {
+      setPage(raw);
+    }
+  };
+  const commit = (e) => {
+    setOffsetValue((Number(e.target.value) - 1) * perPage);
+    onPageChangeAction();
+  };
+  const step = (type) => {
+    const p = Number(page);
+    if (type === "dec" && p > 1) {
+      setPage(p - 1);
+      setOffsetValue((p - 2) * perPage);
+      onPageChangeAction();
+    } else if (type === "inc" && p < maxPage) {
+      setPage(p + 1);
+      setOffsetValue(p * perPage);
+      onPageChangeAction();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: ScPagination_default.scPagination + (className ? " " + className : ""), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: ScPagination_default.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      import_icons62.SiconRight,
+      {
+        size: 24,
+        color: "var(--alias-text-and-icons-primary)",
+        className: ScPagination_default.leftArrow,
+        onClick: () => step("dec")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScPagination_default.page, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      "input",
+      {
+        type: "number",
+        pattern: "\\d*",
+        value: page,
+        onChange: handlePageValue,
+        onBlur: commit
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      import_icons62.SiconRight,
+      {
+        size: 24,
+        color: "var(--alias-text-and-icons-primary)",
+        onClick: () => step("inc")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: ScPagination_default.pageCount, children: [
+      "of ",
+      maxPage
+    ] })
+  ] }) });
+};
+
 // src/SC-Beacon/ScBeacon.module.css
 var ScBeacon_default = {
   scBeacon: "ScBeacon_scBeacon",
@@ -7248,19 +7599,19 @@ var ScBeacon_default = {
 };
 
 // src/SC-Beacon/ScBeacon.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var ScBeacon = ({
   tone = "neutral",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "span",
     {
       className: ScBeacon_default.scBeacon + " " + ScBeacon_default[tone] + (className ? " " + className : ""),
       "aria-hidden": "true",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
         "svg",
         {
           viewBox: "0 0 20 20",
@@ -7269,8 +7620,8 @@ var ScBeacon = ({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor", fillOpacity: "0.24" }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" })
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor", fillOpacity: "0.24" }),
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" })
           ]
         }
       )
@@ -7290,7 +7641,7 @@ var ScStoreCard_default = {
 };
 
 // src/SC-StoreCard/ScStoreCard.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var ScStoreCard = ({
   storeName = "Store Name",
   noOfProducts = "1490 Products",
@@ -7299,18 +7650,18 @@ var ScStoreCard = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "div",
     {
       className: ScStoreCard_default.scStoreCard + (className ? " " + className : ""),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: ScStoreCard_default.nameSection, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: ScStoreCard_default.storeName, title: storeName, children: storeName }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ScHDivider, { className: ScStoreCard_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: ScStoreCard_default.footer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ScBeacon, { tone }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: ScStoreCard_default.products, children: noOfProducts }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: ScStoreCard_default.date, children: dateCreated })
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: ScStoreCard_default.nameSection, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: ScStoreCard_default.storeName, title: storeName, children: storeName }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ScHDivider, { className: ScStoreCard_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: ScStoreCard_default.footer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ScBeacon, { tone }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: ScStoreCard_default.products, children: noOfProducts }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: ScStoreCard_default.date, children: dateCreated })
         ] })
       ]
     }
@@ -7329,7 +7680,7 @@ var ScCatalogixStoreHeader_default = {
 };
 
 // src/SC-Catalogix-Store-Header/ScCatalogixStoreHeader.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var ScCatalogixStoreHeader = ({
   storeNameLabel = "Store name",
   statusLabel = "Status",
@@ -7342,18 +7693,18 @@ var ScCatalogixStoreHeader = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       className: ScCatalogixStoreHeader_default.scCatalogixStoreHeader + (className ? " " + className : ""),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colName, children: storeNameLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colStatus, children: statusLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colNum, children: productsLabel }),
-        showAssets && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colNum, children: assetsLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colDate, children: createdOnLabel }),
-        showCreatedBy && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colBy, children: createdByLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colName, children: storeNameLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colStatus, children: statusLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colNum, children: productsLabel }),
+        showAssets && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colNum, children: assetsLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colDate, children: createdOnLabel }),
+        showCreatedBy && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: ScCatalogixStoreHeader_default.label + " " + ScCatalogixStoreHeader_default.colBy, children: createdByLabel })
       ]
     }
   );
@@ -7375,7 +7726,7 @@ var ScCatalogixStoreTableList_default = {
 };
 
 // src/SC-CatalogixStoreTableList/ScCatalogixStoreTableList.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var STATUS_TONE_CLASS = {
   success: "statusSuccess",
   warning: "statusWarning",
@@ -7396,18 +7747,18 @@ var ScCatalogixStoreTableList = ({
   ...props
 }) => {
   const toneClass = ScCatalogixStoreTableList_default[STATUS_TONE_CLASS[statusTone] || "statusNeutral"];
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "div",
     {
       className: ScCatalogixStoreTableList_default.scCatalogixStoreTableList + (className ? " " + className : ""),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: ScCatalogixStoreTableList_default.name, title: storeName, children: storeName }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: ScCatalogixStoreTableList_default.status + " " + toneClass, children: status }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colNum, children: products }),
-        showAssets && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colNum, children: assets }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colDate, children: createdOn }),
-        showCreatedBy && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colBy, children: createdBy })
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScCatalogixStoreTableList_default.name, title: storeName, children: storeName }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScCatalogixStoreTableList_default.status + " " + toneClass, children: status }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colNum, children: products }),
+        showAssets && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colNum, children: assets }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colDate, children: createdOn }),
+        showCreatedBy && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: ScCatalogixStoreTableList_default.cell + " " + ScCatalogixStoreTableList_default.colBy, children: createdBy })
       ]
     }
   );
@@ -7427,7 +7778,7 @@ var ScThinkingStepIcon_default = {
 };
 
 // src/SC-ThinkingStepIcon/ScThinkingStepIcon.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var ScThinkingStepIcon = ({
   state = "default",
   size = 12,
@@ -7436,13 +7787,13 @@ var ScThinkingStepIcon = ({
   ...props
 }) => {
   const variantsClassName = ScThinkingStepIcon_default["state-" + state];
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "span",
     {
       className: ScThinkingStepIcon_default.scThinkingStepIcon + " " + (className ?? "") + " " + variantsClassName,
       style: { width: size, height: size, ...style },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
         "svg",
         {
           className: ScThinkingStepIcon_default.glyph,
@@ -7453,7 +7804,7 @@ var ScThinkingStepIcon = ({
           xmlns: "http://www.w3.org/2000/svg",
           "aria-hidden": "true",
           children: [
-            state === "default" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            state === "default" && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               "circle",
               {
                 className: ScThinkingStepIcon_default.stroke,
@@ -7464,7 +7815,7 @@ var ScThinkingStepIcon = ({
                 strokeLinecap: "round"
               }
             ),
-            state === "working" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            state === "working" && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               "path",
               {
                 className: ScThinkingStepIcon_default.stroke + " " + ScThinkingStepIcon_default.spinner,
@@ -7474,7 +7825,7 @@ var ScThinkingStepIcon = ({
                 strokeLinejoin: "round"
               }
             ),
-            state === "completed" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            state === "completed" && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               "path",
               {
                 className: ScThinkingStepIcon_default.stroke,
@@ -7484,7 +7835,7 @@ var ScThinkingStepIcon = ({
                 strokeLinejoin: "round"
               }
             ),
-            state === "error" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            state === "error" && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               "path",
               {
                 className: ScThinkingStepIcon_default.stroke,
@@ -7523,8 +7874,8 @@ var ScInChatList_default = {
 };
 
 // src/SC-InChatList/ScInChatList.tsx
-var import_icons61 = require("@streamoid/icons");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_icons63 = require("@streamoid/icons");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var ScInChatList = ({
   title = "Infrastructure that helps modern brands scale",
   description = "Description",
@@ -7541,33 +7892,33 @@ var ScInChatList = ({
 }) => {
   const isExpandable = descriptionVisibility === "hidden" || descriptionVisibility === "visible";
   const isExpanded = descriptionVisibility === "visible";
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "div",
     {
       className: ScInChatList_default.scInChatList + (className ? " " + className : ""),
       style,
       children: [
-        leadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: ScInChatList_default.indicatorWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ScThinkingStepIcon, { state: iconState }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: ScInChatList_default.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: ScInChatList_default.headerArea, children: [
-            showSteps && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: ScInChatList_default.stepCount, children: stepCount }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+        leadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScInChatList_default.indicatorWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ScThinkingStepIcon, { state: iconState }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScInChatList_default.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScInChatList_default.headerArea, children: [
+            showSteps && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScInChatList_default.stepCount, children: stepCount }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               "div",
               {
                 className: ScInChatList_default.titleRow + " " + (isExpandable ? ScInChatList_default.titleRowClickable : ScInChatList_default.titleRowStatic),
                 onClick: isExpandable ? onToggle : void 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: ScInChatList_default.title, children: title }),
-                  isExpandable && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: ScInChatList_default.chevronWrapper, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons61.SiconUp, { size: 12, className: ScInChatList_default.chevronIcon }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons61.SiconDown, { size: 12, className: ScInChatList_default.chevronIcon }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScInChatList_default.title, children: title }),
+                  isExpandable && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScInChatList_default.chevronWrapper, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_icons63.SiconUp, { size: 12, className: ScInChatList_default.chevronIcon }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_icons63.SiconDown, { size: 12, className: ScInChatList_default.chevronIcon }) })
                 ]
               }
             ),
-            isExpanded && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: ScInChatList_default.descriptionRow, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: ScInChatList_default.descriptionIcon, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons61.SiconDot, { size: 20, className: ScInChatList_default.descriptionDot }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: ScInChatList_default.descriptionText, children: description })
+            isExpanded && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScInChatList_default.descriptionRow, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScInChatList_default.descriptionIcon, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_icons63.SiconDot, { size: 20, className: ScInChatList_default.descriptionDot }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScInChatList_default.descriptionText, children: description })
             ] })
           ] }),
-          showTool && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: ScInChatList_default.toolPill, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: ScInChatList_default.toolText, children: toolUsing }) })
+          showTool && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScInChatList_default.toolPill, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScInChatList_default.toolText, children: toolUsing }) })
         ] })
       ]
     }
@@ -7581,7 +7932,7 @@ var ScSubAgent_default = {
 };
 
 // src/SC-SubAgent/ScSubAgent.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 function formatSubAgentLabel(agentName) {
   const normalized = (agentName ?? "").trim();
   if (!normalized) return "Using sub-agent...";
@@ -7594,12 +7945,12 @@ var ScSubAgent = ({
   ...props
 }) => {
   const label = text ?? formatSubAgentLabel(agentName);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "div",
     {
       className: [ScSubAgent_default.scSubAgent, className].filter(Boolean).join(" "),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: ScSubAgent_default.label, children: label })
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: ScSubAgent_default.label, children: label })
     }
   );
 };
@@ -7613,7 +7964,7 @@ var ScInChatMessage_default = {
 };
 
 // src/SC-InChatMessage/ScInChatMessage.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var ScInChatMessage = ({
   type = "input",
   text,
@@ -7623,13 +7974,13 @@ var ScInChatMessage = ({
   ...props
 }) => {
   const variantsClassName = ScInChatMessage_default["type-" + type];
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "div",
     {
       className: [ScInChatMessage_default.scInChatMessage, variantsClassName, className].filter(Boolean).join(" "),
       id,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: ScInChatMessage_default.text, children: children ?? text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: ScInChatMessage_default.text, children: children ?? text })
     }
   );
 };
@@ -7646,7 +7997,7 @@ var ScSelection_default = {
 };
 
 // src/SC-Selection/ScSelection.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var ScSelection = ({
   title = "Title",
   description = "Description",
@@ -7662,23 +8013,23 @@ var ScSelection = ({
     onClick?.(event);
     onSelect?.(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
     "div",
     {
       className: [ScSelection_default.scSelection, variantsClassName, className].filter(Boolean).join(" "),
       onClick: handleClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           ScRadio,
           {
             state: active ? "selected" : "default",
             className: ScSelection_default.scRadioInstance
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScSelection_default.wrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScSelection_default.title, children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScSelection_default.description, children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: ScSelection_default.wrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: ScSelection_default.title, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: ScSelection_default.description, children: description })
         ] })
       ]
     }
@@ -7705,7 +8056,7 @@ var ScSelectionList_default = {
 };
 
 // src/SC-SelectionList/ScSelectionList.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var ScSelectionList = ({
   state = "default",
   label = "Suggested Colours: ",
@@ -7728,14 +8079,14 @@ var ScSelectionList = ({
     onChange?.(next);
     if (next === "rejected") onReject?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "div",
     {
       className: ScSelectionList_default.scSelectionList + (disabled ? " " + ScSelectionList_default.disabled : "") + (className ? " " + className : "") + " " + variantsClassName,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScSelectionList_default.toggles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScSelectionList_default.toggles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "button",
             {
               type: "button",
@@ -7744,7 +8095,7 @@ var ScSelectionList = ({
               disabled,
               "aria-pressed": state === "approved",
               "aria-label": state === "approved" ? "Revoke approval" : "Approve",
-              children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 "svg",
                 {
                   className: ScSelectionList_default.checkIcon,
@@ -7753,7 +8104,7 @@ var ScSelectionList = ({
                   viewBox: "0 0 8 6",
                   fill: "none",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                     "path",
                     {
                       d: "M0.5 3.5L2.5 5.5L7.5 0.5",
@@ -7766,7 +8117,7 @@ var ScSelectionList = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "button",
             {
               type: "button",
@@ -7775,7 +8126,7 @@ var ScSelectionList = ({
               disabled,
               "aria-pressed": state === "rejected",
               "aria-label": state === "rejected" ? "Revoke rejection" : "Reject",
-              children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 "svg",
                 {
                   className: ScSelectionList_default.closeIcon,
@@ -7784,7 +8135,7 @@ var ScSelectionList = ({
                   viewBox: "0 0 6.24261 6.24262",
                   fill: "none",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                     "path",
                     {
                       d: "M0.5 5.74262L3.12132 3.12132M3.12132 3.12132L5.74261 0.5M3.12132 3.12132L0.5 0.5M3.12132 3.12132L5.74261 5.74262",
@@ -7798,9 +8149,9 @@ var ScSelectionList = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScSelectionList_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScSelectionList_default.row, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: ScSelectionList_default.label, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: ScSelectionList_default.valuesPill, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: ScSelectionList_default.valuesText, children: optionValues }) })
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: ScSelectionList_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScSelectionList_default.row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScSelectionList_default.label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScSelectionList_default.valuesPill, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScSelectionList_default.valuesText, children: optionValues }) })
         ] }) })
       ]
     }
@@ -7808,7 +8159,7 @@ var ScSelectionList = ({
 };
 
 // src/SC-textArea/ScTextArea.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // src/SC-textArea/ScTextArea.module.css
 var ScTextArea_default = {
@@ -7827,7 +8178,7 @@ var ScTextArea_default = {
 };
 
 // src/SC-textArea/ScTextArea.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var ScTextArea = ({
   state,
   labelGroup = "",
@@ -7838,27 +8189,27 @@ var ScTextArea = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = (0, import_react15.useState)(false);
+  const [focused, setFocused] = (0, import_react17.useState)(false);
   const derivedState = state ?? (props.disabled ? "disabled" : focused ? "active" : (props.value !== void 0 ? String(props.value).length > 0 : false) ? "filled" : "default");
   const stateClass = ScTextArea_default["state-" + derivedState];
   const labelGroupClass = ScTextArea_default["label-group-" + (labelGroup || "none")];
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "div",
     {
       className: [ScTextArea_default.scTextArea, stateClass, labelGroupClass, className].filter(Boolean).join(" "),
       style,
       children: [
-        labelGroup && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScTextArea_default.labelContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScTextArea_default.label, children: [
+        labelGroup && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScTextArea_default.labelContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScTextArea_default.label, children: [
             label,
             " "
           ] }),
-          labelGroup === "text" && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScTextArea_default.info, children: [
+          labelGroup === "text" && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScTextArea_default.info, children: [
             info,
             " "
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScTextArea_default.inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScTextArea_default.inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "textarea",
           {
             className: ScTextArea_default.inputText,
@@ -7880,7 +8231,7 @@ var ScTextArea = ({
 };
 
 // src/SC-select/ScSelect.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/SC-select/ScSelect.module.css
 var ScSelect_default = {
@@ -7905,7 +8256,7 @@ var ScSelect_default = {
 };
 
 // src/SC-select/ScSelect.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var ScSelect = (props) => {
   const {
     value,
@@ -7917,9 +8268,9 @@ var ScSelect = (props) => {
     disabled = false,
     className
   } = props;
-  const [open, setOpen] = (0, import_react16.useState)(false);
-  const rootRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const [open, setOpen] = (0, import_react18.useState)(false);
+  const rootRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
@@ -7945,10 +8296,10 @@ var ScSelect = (props) => {
     labelGroup ? ScSelect_default["label-group-" + labelGroup] : void 0,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: rootClass, ref: rootRef, children: [
-    labelGroup === "label" && label ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScSelect_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScSelect_default.label, children: label }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: ScSelect_default.selectArea, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: rootClass, ref: rootRef, children: [
+    labelGroup === "label" && label ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScSelect_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScSelect_default.label, children: label }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScSelect_default.selectArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
         "button",
         {
           type: "button",
@@ -7958,18 +8309,18 @@ var ScSelect = (props) => {
           "aria-haspopup": "listbox",
           "aria-expanded": open,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               "span",
               {
                 className: [ScSelect_default.triggerText, selected ? void 0 : ScSelect_default.placeholder].filter(Boolean).join(" "),
                 children: selected ? selected.label : placeholder
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               "span",
               {
                 className: [ScSelect_default.chevron, open ? ScSelect_default.chevronOpen : void 0].filter(Boolean).join(" "),
-                children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                   "path",
                   {
                     d: "M5 7.5L10 12.5L15 7.5",
@@ -7984,13 +8335,13 @@ var ScSelect = (props) => {
           ]
         }
       ),
-      open ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScSelect_default.menu, role: "listbox", children: options.map((option) => {
+      open ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScSelect_default.menu, role: "listbox", children: options.map((option) => {
         const isSelected = option.id === value;
         const optionClass = [
           ScSelect_default.option,
           isSelected ? ScSelect_default["option-selected"] : void 0
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
           "div",
           {
             className: optionClass,
@@ -7998,8 +8349,8 @@ var ScSelect = (props) => {
             "aria-selected": isSelected,
             onClick: () => handleSelect(option.id),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: ScSelect_default.optionLabel, children: option.label }),
-              option.description ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: ScSelect_default.optionDescription, children: option.description }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScSelect_default.optionLabel, children: option.label }),
+              option.description ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScSelect_default.optionDescription, children: option.description }) : null
             ]
           },
           option.id
@@ -8010,7 +8361,7 @@ var ScSelect = (props) => {
 };
 
 // src/SC-fileField/ScFileField.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/SC-fileField/ScFileField.module.css
 var ScFileField_default = {
@@ -8034,7 +8385,7 @@ var ScFileField_default = {
 };
 
 // src/SC-fileField/ScFileField.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var ScFileField = (props) => {
   const {
     onFileSelect,
@@ -8048,7 +8399,7 @@ var ScFileField = (props) => {
     label,
     className
   } = props;
-  const inputRef = (0, import_react17.useRef)(null);
+  const inputRef = (0, import_react19.useRef)(null);
   const hasFile = Boolean(fileName);
   const isUploading = Boolean(uploading);
   const clampedProgress = Math.max(0, Math.min(100, progress));
@@ -8057,7 +8408,7 @@ var ScFileField = (props) => {
       onFileSelect(e.target.files);
     }
   };
-  const uploadIcon = /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  const uploadIcon = /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "svg",
     {
       className: ScFileField_default.uploadIcon,
@@ -8071,13 +8422,13 @@ var ScFileField = (props) => {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M12 16V4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M7 9l5-5 5 5" })
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M12 16V4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M7 9l5-5 5 5" })
       ]
     }
   );
-  const fileIcon = /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  const fileIcon = /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "svg",
     {
       className: ScFileField_default.fileIcon,
@@ -8091,12 +8442,12 @@ var ScFileField = (props) => {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M14 2v6h6" })
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M14 2v6h6" })
       ]
     }
   );
-  const clearIcon = /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  const clearIcon = /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "svg",
     {
       width: "20",
@@ -8109,20 +8460,20 @@ var ScFileField = (props) => {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M18 6L6 18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M6 6l12 12" })
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M18 6L6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M6 6l12 12" })
       ]
     }
   );
   const rootClass = [ScFileField_default.scFileField, className].filter(Boolean).join(" ");
   const showRow = hasFile || isUploading;
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: rootClass, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: ScFileField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: ScFileField_default.label, children: label }) }) : null,
-    showRow ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScFileField_default.inputContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: rootClass, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScFileField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScFileField_default.label, children: label }) }) : null,
+    showRow ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScFileField_default.inputContainer, children: [
       fileIcon,
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScFileField_default.fileInfo, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScFileField_default.fileName, children: fileName }),
-        isUploading ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: ScFileField_default.progressTrack, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScFileField_default.fileInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: ScFileField_default.fileName, children: fileName }),
+        isUploading ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScFileField_default.progressTrack, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           "div",
           {
             className: ScFileField_default.progressFill,
@@ -8130,7 +8481,7 @@ var ScFileField = (props) => {
           }
         ) }) : null
       ] }),
-      !isUploading ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      !isUploading ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "button",
         {
           type: "button",
@@ -8140,8 +8491,8 @@ var ScFileField = (props) => {
           children: clearIcon
         }
       ) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("label", { className: ScFileField_default.dropzone, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("label", { className: ScFileField_default.dropzone, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "input",
         {
           ref: inputRef,
@@ -8153,21 +8504,21 @@ var ScFileField = (props) => {
         }
       ),
       uploadIcon,
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScFileField_default.dropzoneText, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScFileField_default.dropzoneAction, children: "Click to upload" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScFileField_default.dropzoneText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: ScFileField_default.dropzoneAction, children: "Click to upload" }),
         " or drag and drop"
       ] }),
-      accept ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: ScFileField_default.acceptedText, children: [
+      accept ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScFileField_default.acceptedText, children: [
         "Accepted: ",
         accept
       ] }) : null
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: ScFileField_default.errorText, children: error }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScFileField_default.errorText, children: error }) : null
   ] });
 };
 
 // src/SC-mediaApproval/ScMediaApproval.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/SC-mediaApproval/ScMediaApproval.module.css
 var ScMediaApproval_default = {
@@ -8192,7 +8543,7 @@ var ScMediaApproval_default = {
 };
 
 // src/SC-mediaApproval/ScMediaApproval.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var VIDEO_EXT = /\.(mp4|webm|ogg|mov|m4v)(\?.*)?$/i;
 var isVideoUrl = (url, mediaType) => {
   if (mediaType === "video") return true;
@@ -8214,9 +8565,9 @@ var ScMediaApproval = (props) => {
     className
   } = props;
   const total = mediaUrls.length;
-  const [index, setIndex] = (0, import_react18.useState)(activeIndex ?? 0);
-  const [mediaLoading, setMediaLoading] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [index, setIndex] = (0, import_react20.useState)(activeIndex ?? 0);
+  const [mediaLoading, setMediaLoading] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     if (typeof activeIndex === "number") {
       setIndex(activeIndex);
     }
@@ -8234,9 +8585,9 @@ var ScMediaApproval = (props) => {
   const handlePreview = () => {
     if (currentUrl && onPreview) onPreview(currentUrl);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: [ScMediaApproval_default.scMediaApproval, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScMediaApproval_default.mediaFrame, children: [
-      currentUrl ? currentIsVideo ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: [ScMediaApproval_default.scMediaApproval, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScMediaApproval_default.mediaFrame, children: [
+      currentUrl ? currentIsVideo ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "video",
         {
           className: ScMediaApproval_default.media,
@@ -8245,7 +8596,7 @@ var ScMediaApproval = (props) => {
           onClick: handlePreview,
           onLoadedData: () => setMediaLoading(false)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "img",
         {
           className: ScMediaApproval_default.media,
@@ -8254,8 +8605,8 @@ var ScMediaApproval = (props) => {
           onClick: handlePreview,
           onLoad: () => setMediaLoading(false)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScMediaApproval_default.mediaEmpty }),
-      (loading || mediaLoading) && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScMediaApproval_default.spinnerOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScMediaApproval_default.mediaEmpty }),
+      (loading || mediaLoading) && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScMediaApproval_default.spinnerOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "svg",
         {
           className: ScMediaApproval_default.spinner,
@@ -8263,7 +8614,7 @@ var ScMediaApproval = (props) => {
           height: "32",
           viewBox: "0 0 24 24",
           fill: "none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "path",
             {
               d: "M12 3a9 9 0 1 0 9 9",
@@ -8274,15 +8625,15 @@ var ScMediaApproval = (props) => {
           )
         }
       ) }),
-      total > 1 && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      total > 1 && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "button",
           {
             type: "button",
             className: [ScMediaApproval_default.navButton, ScMediaApproval_default.navPrev].join(" "),
             "aria-label": "Previous",
             onClick: () => goTo(safeIndex - 1),
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
               "path",
               {
                 d: "M15 6L9 12L15 18",
@@ -8294,14 +8645,14 @@ var ScMediaApproval = (props) => {
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "button",
           {
             type: "button",
             className: [ScMediaApproval_default.navButton, ScMediaApproval_default.navNext].join(" "),
             "aria-label": "Next",
             onClick: () => goTo(safeIndex + 1),
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
               "path",
               {
                 d: "M9 6L15 12L9 18",
@@ -8313,12 +8664,12 @@ var ScMediaApproval = (props) => {
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScMediaApproval_default.counterBadge, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScMediaApproval_default.counterBadge, children: [
           safeIndex + 1,
           " / ",
           total
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScMediaApproval_default.dots, children: mediaUrls.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScMediaApproval_default.dots, children: mediaUrls.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "button",
           {
             type: "button",
@@ -8333,9 +8684,9 @@ var ScMediaApproval = (props) => {
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScMediaApproval_default.feedbackBlock, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScMediaApproval_default.label, children: feedbackLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScMediaApproval_default.inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScMediaApproval_default.feedbackBlock, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScMediaApproval_default.label, children: feedbackLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScMediaApproval_default.inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "textarea",
         {
           className: ScMediaApproval_default.textArea,
@@ -8351,7 +8702,7 @@ var ScMediaApproval = (props) => {
 };
 
 // src/SC-mediaSelect/ScMediaSelect.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/SC-mediaSelect/ScMediaSelect.module.css
 var ScMediaSelect_default = {
@@ -8371,8 +8722,8 @@ var ScMediaSelect_default = {
 };
 
 // src/SC-mediaSelect/ScMediaSelect.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var CheckBadge = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScMediaSelect_default.checkBadge, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var CheckBadge = () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: ScMediaSelect_default.checkBadge, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
   "path",
   {
     d: "M3.5 7.25L6 9.75L10.5 4.75",
@@ -8382,7 +8733,7 @@ var CheckBadge = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { c
     strokeLinejoin: "round"
   }
 ) }) });
-var MaximizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+var MaximizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
   "path",
   {
     d: "M15 3H21V9M9 21H3V15M21 3L14 10M3 21L10 14",
@@ -8407,16 +8758,16 @@ var ScMediaSelect = (props) => {
   } = props;
   const total = items.length;
   const resolvedMax = typeof max === "number" ? max : total;
-  const selectedSet = (0, import_react19.useMemo)(() => new Set(selected), [selected]);
+  const selectedSet = (0, import_react21.useMemo)(() => new Set(selected), [selected]);
   const selectedCount = selectedSet.size;
   let countLabel = selectedCount + " of " + total + " selected";
   if (min > 0) countLabel += " (min " + min + ")";
   if (resolvedMax < total) countLabel += " (max " + resolvedMax + ")";
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: [ScMediaSelect_default.scMediaSelect, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScMediaSelect_default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScMediaSelect_default.countLabel, children: countLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScMediaSelect_default.actions, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: [ScMediaSelect_default.scMediaSelect, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScMediaSelect_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: ScMediaSelect_default.countLabel, children: countLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScMediaSelect_default.actions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           "button",
           {
             type: "button",
@@ -8425,8 +8776,8 @@ var ScMediaSelect = (props) => {
             children: "Select all"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScMediaSelect_default.divider, children: "|" }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: ScMediaSelect_default.divider, children: "|" }),
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           "button",
           {
             type: "button",
@@ -8437,13 +8788,13 @@ var ScMediaSelect = (props) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScMediaSelect_default.grid, children: items.map((url, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMediaSelect_default.grid, children: items.map((url, index) => {
       const isSelected = selectedSet.has(url);
       const itemClass = [
         ScMediaSelect_default.item,
         isSelected ? ScMediaSelect_default["state-selected"] : ScMediaSelect_default["state-default"]
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
         "div",
         {
           className: itemClass,
@@ -8452,9 +8803,9 @@ var ScMediaSelect = (props) => {
           tabIndex: 0,
           "aria-pressed": isSelected,
           children: [
-            mediaType === "video" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("video", { className: ScMediaSelect_default.media, src: url, muted: true, playsInline: true }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("img", { className: ScMediaSelect_default.media, src: url, alt: "" }),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CheckBadge, {}),
-            onPreview && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+            mediaType === "video" ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("video", { className: ScMediaSelect_default.media, src: url, muted: true, playsInline: true }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("img", { className: ScMediaSelect_default.media, src: url, alt: "" }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(CheckBadge, {}),
+            onPreview && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               "button",
               {
                 type: "button",
@@ -8464,7 +8815,7 @@ var ScMediaSelect = (props) => {
                   onPreview(url);
                 },
                 "aria-label": "Preview",
-                children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(MaximizeIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(MaximizeIcon, {})
               }
             )
           ]
@@ -8476,7 +8827,7 @@ var ScMediaSelect = (props) => {
 };
 
 // src/SC-todoList/ScTodoList.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/SC-todoList/ScTodoList.module.css
 var ScTodoList_default = {
@@ -8499,7 +8850,7 @@ var ScTodoList_default = {
 };
 
 // src/SC-todoList/ScTodoList.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var ScTodoList = ({
   items = [],
   onToggle,
@@ -8509,9 +8860,9 @@ var ScTodoList = ({
   addPlaceholder = "Add an item",
   className
 }) => {
-  const [editingId, setEditingId] = (0, import_react20.useState)(null);
-  const [editValue, setEditValue] = (0, import_react20.useState)("");
-  const [newValue, setNewValue] = (0, import_react20.useState)("");
+  const [editingId, setEditingId] = (0, import_react22.useState)(null);
+  const [editValue, setEditValue] = (0, import_react22.useState)("");
+  const [newValue, setNewValue] = (0, import_react22.useState)("");
   const total = items.length;
   const completed = items.filter((i) => i.status === "completed").length;
   const startEditing = (item) => {
@@ -8533,9 +8884,9 @@ var ScTodoList = ({
     onAdd?.(newValue);
     setNewValue("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: [ScTodoList_default.scTodoList, className].filter(Boolean).join(" "), children: [
-    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScTodoList_default.progress, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: [ScTodoList_default.scTodoList, className].filter(Boolean).join(" "), children: [
+    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTodoList_default.progress, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         "svg",
         {
           className: ScTodoList_default.progressIcon,
@@ -8544,7 +8895,7 @@ var ScTodoList = ({
           viewBox: "0 0 14 14",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
             "path",
             {
               d: "M3 7L6 10L11 4",
@@ -8556,25 +8907,25 @@ var ScTodoList = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: ScTodoList_default.progressText, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { className: ScTodoList_default.progressText, children: [
         completed,
         " of ",
         total,
         " completed"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScTodoList_default.rows, children: items.map((item) => {
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScTodoList_default.rows, children: items.map((item) => {
       const isEditing = editingId === item.id;
       const isCompleted = item.status === "completed";
-      return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScTodoList_default.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTodoList_default.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "button",
           {
             type: "button",
             className: ScTodoList_default.checkbox,
             "aria-label": isCompleted ? "Mark as pending" : "Mark as completed",
             onClick: () => onToggle?.(item.id),
-            children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+            children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
               "svg",
               {
                 width: "18",
@@ -8583,8 +8934,8 @@ var ScTodoList = ({
                 fill: "none",
                 xmlns: "http://www.w3.org/2000/svg",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("circle", { cx: "9", cy: "9", r: "9", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("circle", { cx: "9", cy: "9", r: "9", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                     "path",
                     {
                       d: "M5.25 9L7.75 11.5L12.75 6.5",
@@ -8596,7 +8947,7 @@ var ScTodoList = ({
                   )
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
               "svg",
               {
                 width: "18",
@@ -8604,7 +8955,7 @@ var ScTodoList = ({
                 viewBox: "0 0 18 18",
                 fill: "none",
                 xmlns: "http://www.w3.org/2000/svg",
-                children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                   "circle",
                   {
                     cx: "9",
@@ -8618,7 +8969,7 @@ var ScTodoList = ({
             )
           }
         ),
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "input",
           {
             className: ScTodoList_default.editInput,
@@ -8636,7 +8987,7 @@ var ScTodoList = ({
               }
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "span",
           {
             className: [
@@ -8646,15 +8997,15 @@ var ScTodoList = ({
             children: item.content
           }
         ),
-        !isEditing && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScTodoList_default.actions, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        !isEditing && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTodoList_default.actions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
             "button",
             {
               type: "button",
               className: ScTodoList_default.actionButton,
               "aria-label": "Edit item",
               onClick: () => startEditing(item),
-              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                 "svg",
                 {
                   width: "16",
@@ -8662,7 +9013,7 @@ var ScTodoList = ({
                   viewBox: "0 0 16 16",
                   fill: "none",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                     "path",
                     {
                       d: "M11.333 2.667a1.414 1.414 0 0 1 2 2L5.333 12.667l-2.667.667.667-2.667 8-8Z",
@@ -8676,14 +9027,14 @@ var ScTodoList = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
             "button",
             {
               type: "button",
               className: [ScTodoList_default.actionButton, ScTodoList_default.actionButtonDanger].filter(Boolean).join(" "),
               "aria-label": "Delete item",
               onClick: () => onDelete?.(item.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                 "svg",
                 {
                   width: "16",
@@ -8691,7 +9042,7 @@ var ScTodoList = ({
                   viewBox: "0 0 16 16",
                   fill: "none",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                     "path",
                     {
                       d: "M2.667 4h10.666M6.667 7.333v3.334M9.333 7.333v3.334M3.333 4l.667 8a1.333 1.333 0 0 0 1.333 1.333h5.334A1.333 1.333 0 0 0 12 12l.667-8M6 4V2.667a.667.667 0 0 1 .667-.667h2.666a.667.667 0 0 1 .667.667V4",
@@ -8708,8 +9059,8 @@ var ScTodoList = ({
         ] })
       ] }, item.id);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScTodoList_default.addRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTodoList_default.addRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         "input",
         {
           className: ScTodoList_default.addInput,
@@ -8724,7 +9075,7 @@ var ScTodoList = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         "button",
         {
           type: "button",
@@ -8732,7 +9083,7 @@ var ScTodoList = ({
           "aria-label": "Add item",
           disabled: newValue.trim().length === 0,
           onClick: commitAdd,
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
             "svg",
             {
               width: "18",
@@ -8740,7 +9091,7 @@ var ScTodoList = ({
               viewBox: "0 0 18 18",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                 "path",
                 {
                   d: "M9 4v10M4 9h10",
@@ -8767,18 +9118,18 @@ var ScRoleMobile_default = {
 };
 
 // src/SC-Role-Mobile/ScRoleMobile.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var ScRoleMobile = ({
   role = "admin",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     "div",
     {
       className: ScRoleMobile_default.scRoleMobile + " " + ScRoleMobile_default["role-" + role] + " " + className,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
     }
   );
 };
@@ -8795,7 +9146,7 @@ var ScProfileV2Mobile_default = {
 };
 
 // src/SC-Profile-V2-Mobile/ScProfileV2Mobile.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var ScProfileV2Mobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -8805,17 +9156,17 @@ var ScProfileV2Mobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  const profileImage = /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  const profileImage = /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       className: ScProfileV2Mobile_default.scProfileV2Mobile + " " + className,
       ...props,
       children: [
         dpPosition === "left" && profileImage,
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScProfileV2Mobile_default.userInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: ScProfileV2Mobile_default.userName, children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScProfileV2Mobile_default.userInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScProfileV2Mobile_default.userName, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
         ] }),
         dpPosition === "right" && profileImage
       ]
@@ -8842,7 +9193,7 @@ var ScTableListMobile_default = {
 };
 
 // src/SC-tableList-mobile/ScTableListMobile.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var ScTableListMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -8855,25 +9206,25 @@ var ScTableListMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
     "div",
     {
       className: ScTableListMobile_default.scTableListMobile + " " + className,
       onClick: onRowClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTableListMobile_default.profileRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTableListMobile_default.userInfo, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: ScTableListMobile_default.userName, children: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: ScTableListMobile_default.userEmail, children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScTableListMobile_default.profileRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScTableListMobile_default.userInfo, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: ScTableListMobile_default.userName, children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: ScTableListMobile_default.userEmail, children: email })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScTableListMobile_default.initials, children: initials }) })
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScTableListMobile_default.initials, children: initials }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTableListMobile_default.detailsRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: ScTableListMobile_default.roleText, children: role }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScTableListMobile_default.accessInfo, children: [
-            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
-            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScTableListMobile_default.detailsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: ScTableListMobile_default.roleText, children: role }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScTableListMobile_default.accessInfo, children: [
+            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
+            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
           ] })
         ] })
       ]
@@ -8901,7 +9252,7 @@ var ScWorkspaceSwitchMobile_default = {
 };
 
 // src/SC-workspaceSwitch-Mobile/ScWorkspaceSwitchMobile.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var ScWorkspaceSwitchMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -8914,24 +9265,24 @@ var ScWorkspaceSwitchMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
     "div",
     {
       className: ScWorkspaceSwitchMobile_default.scWorkspaceSwitchMobile + " " + ScWorkspaceSwitchMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScWorkspaceSwitchMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScWorkspaceSwitchMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
         ] })
       ]
     }
@@ -8958,7 +9309,7 @@ var ScWorkspaceSettingsMobile_default = {
 };
 
 // src/SC-workspaceSettings-Mobile/ScWorkspaceSettingsMobile.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var ScWorkspaceSettingsMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -8973,28 +9324,28 @@ var ScWorkspaceSettingsMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     "div",
     {
       className: ScWorkspaceSettingsMobile_default.scWorkspaceSettingsMobile + " " + ScWorkspaceSettingsMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScWorkspaceSettingsMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSettingsMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
         ] })
       ]
     }
@@ -9017,7 +9368,7 @@ var ScMobileTopNav_default = {
 };
 
 // src/SC-MobileTopNav/ScMobileTopNav.tsx
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var ScMobileTopNav = ({
   type = "home",
   searchIcon = false,
@@ -9040,22 +9391,22 @@ var ScMobileTopNav = ({
 }) => {
   const hasBorder = type === "chat" || type === "inApp";
   const showSearch = type === "inApp" && searchIcon && search;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     "div",
     {
       className: ScMobileTopNav_default.scMobileTopNav + " " + (hasBorder ? ScMobileTopNav_default.withBorder : "") + " " + className,
       ...props,
       children: [
-        type === "home" && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-        type === "chat" && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+        type === "home" && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+        type === "chat" && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        showSearch && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "input",
               {
                 type: "text",
@@ -9066,17 +9417,17 @@ var ScMobileTopNav = ({
               }
             ) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        type === "inApp" && !search && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: ScMobileTopNav_default.heading, children: heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+        type === "inApp" && !search && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScMobileTopNav_default.heading, children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
             "div",
             {
               className: ScMobileTopNav_default.iconContainer + " " + (!searchIcon ? ScMobileTopNav_default.hidden : ""),
               onClick: onSearchClick,
-              children: searchIcon ? searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder })
+              children: searchIcon ? searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder })
             }
           )
         ] })
@@ -9097,7 +9448,7 @@ var ScMobileBottomAction_default = {
 };
 
 // src/SC-MobileBottomAction/ScMobileBottomAction.tsx
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var ScMobileBottomAction = ({
   text = "Save Changes",
   disabled = false,
@@ -9109,28 +9460,28 @@ var ScMobileBottomAction = ({
   ...props
 }) => {
   const isTwoButton = !!secondaryText;
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
     "div",
     {
       className: ScMobileBottomAction_default.scMobileBottomAction + (isTwoButton ? " " + ScMobileBottomAction_default.twoButton : "") + " " + className,
       ...props,
       children: [
-        isTwoButton && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        isTwoButton && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
           "button",
           {
             className: ScMobileBottomAction_default.outlineButton + " " + (secondaryDisabled ? ScMobileBottomAction_default.disabled : ""),
             onClick: onSecondaryClick,
             disabled: secondaryDisabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
+            children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
           "button",
           {
             className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
             onClick,
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: ScMobileBottomAction_default.buttonText, children: text })
+            children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: ScMobileBottomAction_default.buttonText, children: text })
           }
         )
       ]
@@ -9148,7 +9499,7 @@ var ScPopUpMenu_default = {
 };
 
 // src/SC-PopUpMenu/ScPopUpMenu.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var ScPopUpMenu = ({
   menu = "Options",
   state = "default",
@@ -9157,15 +9508,15 @@ var ScPopUpMenu = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
     "div",
     {
       className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
       onClick,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScPopUpMenu_default.icon, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: ScPopUpMenu_default.menuText, children: menu })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: ScPopUpMenu_default.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: ScPopUpMenu_default.menuText, children: menu })
       ]
     }
   );
@@ -9191,7 +9542,7 @@ var ScReferralCardMobile_default = {
 };
 
 // src/SC-referralCard-Mobile/ScReferralCardMobile.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var ScReferralCardMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -9204,27 +9555,27 @@ var ScReferralCardMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
     "div",
     {
       className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScReferralCardMobile_default.userRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScReferralCardMobile_default.profileSection, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScReferralCardMobile_default.userInfo, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScReferralCardMobile_default.userName, children: name }),
-              /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScReferralCardMobile_default.userEmail, children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScReferralCardMobile_default.userRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScReferralCardMobile_default.profileSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScReferralCardMobile_default.userInfo, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: ScReferralCardMobile_default.userName, children: name }),
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: ScReferralCardMobile_default.userEmail, children: email })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScReferralCardMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScReferralCardMobile_default.detailsRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScReferralCardMobile_default.dateText, children: date }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScReferralCardMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScReferralCardMobile_default.detailsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: ScReferralCardMobile_default.dateText, children: date }),
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
         ] })
       ]
     }
@@ -9241,19 +9592,19 @@ var InvoiceHistoryMobile_default = {
 };
 
 // src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
   amount = "\u20B9320.89",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: InvoiceHistoryMobile_default.info, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: InvoiceHistoryMobile_default.date, children: date })
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: InvoiceHistoryMobile_default.info, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: InvoiceHistoryMobile_default.date, children: date })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
   ] });
 };
 
@@ -9271,7 +9622,7 @@ var UsageHistoryMobile_default = {
 };
 
 // src/SC-UsageHistoryMobile/UsageHistoryMobile.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var UsageHistoryMobile = ({
   serviceName = "Artifax Generation",
   credits = "50",
@@ -9280,18 +9631,18 @@ var UsageHistoryMobile = ({
   balance = "84,902",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: UsageHistoryMobile_default.row1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: UsageHistoryMobile_default.credits, children: credits })
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: UsageHistoryMobile_default.row1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
+      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: UsageHistoryMobile_default.credits, children: credits })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: UsageHistoryMobile_default.row2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: UsageHistoryMobile_default.metaLeft, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: UsageHistoryMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: date })
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: UsageHistoryMobile_default.row2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: UsageHistoryMobile_default.metaLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: UsageHistoryMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: date })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: UsageHistoryMobile_default.balance, children: balance })
+      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: UsageHistoryMobile_default.balance, children: balance })
     ] })
   ] });
 };
@@ -9315,7 +9666,7 @@ var ScWorkspaceSwitchMobileV2_default = {
 };
 
 // src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.tsx
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var ScWorkspaceSwitchMobileV2 = ({
   wsName = "Workspace name is kepler",
   initials = "WS",
@@ -9328,14 +9679,14 @@ var ScWorkspaceSwitchMobileV2 = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     "div",
     {
       className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
       onClick,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
           ScDp,
           {
             type: imageUrl ? "image" : "initial",
@@ -9349,14 +9700,14 @@ var ScWorkspaceSwitchMobileV2 = ({
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
           ] })
         ] })
       ] })
@@ -9365,7 +9716,7 @@ var ScWorkspaceSwitchMobileV2 = ({
 };
 
 // src/SC-imageField/ScImageField.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/SC-imageField/ScImageField.module.css
 var ScImageField_default = {
@@ -9382,8 +9733,8 @@ var ScImageField_default = {
 };
 
 // src/SC-imageField/ScImageField.tsx
-var import_icons62 = require("@streamoid/icons");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_icons64 = require("@streamoid/icons");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var ScImageField = ({
   label = "Label",
   imagePreview,
@@ -9392,7 +9743,7 @@ var ScImageField = ({
   onRemove,
   className
 }) => {
-  const inputRef = (0, import_react21.useRef)(null);
+  const inputRef = (0, import_react23.useRef)(null);
   const hasImage = !!imagePreview;
   function handleClick() {
     if (!hasImage) {
@@ -9406,8 +9757,8 @@ var ScImageField = ({
     }
     e.target.value = "";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       "input",
       {
         ref: inputRef,
@@ -9417,9 +9768,9 @@ var ScImageField = ({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: ScImageField_default.label, children: label }) }),
-    hasImage ? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScImageField_default.previewArea, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScImageField_default.label, children: label }) }),
+    hasImage ? /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScImageField_default.previewArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
         "img",
         {
           className: ScImageField_default.previewImage,
@@ -9427,9 +9778,9 @@ var ScImageField = ({
           alt: "preview"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-        import_icons62.SiconDelete,
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        import_icons64.SiconDelete,
         {
           className: ScImageField_default.removeIcon,
           color: "var(--alias-text-and-icons-error, #d11a1a)",
@@ -9439,9 +9790,9 @@ var ScImageField = ({
           }
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_icons62.SiconUpload, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_icons64.SiconUpload, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
     ] })
   ] });
 };
@@ -9455,7 +9806,7 @@ var ScSettingsTabComp_default = {
 };
 
 // src/SC-settingsTabComp/ScSettingsTabComp.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var ScSettingsTabComp = ({
   tabName = "Tab",
   active = false,
@@ -9463,12 +9814,12 @@ var ScSettingsTabComp = ({
   className
 }) => {
   const variantsClassName = ScSettingsTabComp_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "div",
     {
       className: ScSettingsTabComp_default.scSettingsTabComp + " " + variantsClassName + " " + (className ?? ""),
       onClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
     }
   );
 };
@@ -9487,8 +9838,8 @@ var ScCreditsUsageCardMobile_default = {
 };
 
 // src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.tsx
-var import_icons63 = require("@streamoid/icons");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_icons65 = require("@streamoid/icons");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var ScCreditsUsageCardMobile = ({
   usageLabel = "Credits usage",
   usageText = "8,450 / 30,000",
@@ -9498,23 +9849,23 @@ var ScCreditsUsageCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: ScCreditsUsageCardMobile_default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-        import_icons63.SiconCredits,
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: ScCreditsUsageCardMobile_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        import_icons65.SiconCredits,
         {
           className: ScCreditsUsageCardMobile_default.headerIcon,
           color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: ScCreditsUsageCardMobile_default.divider }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: ScCreditsUsageCardMobile_default.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
       ScButton,
       {
         text: buyButtonText,
@@ -9555,8 +9906,8 @@ var ScPlanDetailsCardMobile_default = {
 };
 
 // src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.tsx
-var import_icons64 = require("@streamoid/icons");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_icons66 = require("@streamoid/icons");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
@@ -9570,20 +9921,20 @@ var ScPlanDetailsCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-          import_icons64.SiconBilling,
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          import_icons66.SiconBilling,
           {
             className: ScPlanDetailsCardMobile_default.headerIcon,
             color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScPlanDetailsCardMobile_default.badgeGroup, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.badgeSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: ScPlanDetailsCardMobile_default.badgeGroup, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.badgeSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           ScBadges,
           {
             text: badgeText,
@@ -9592,28 +9943,28 @@ var ScPlanDetailsCardMobile = ({
             className: ScPlanDetailsCardMobile_default.scBadgesInstance
           }
         ),
-        badgeSubText && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeDot }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeSubText, children: badgeSubText })
+        badgeSubText && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeDot }),
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeSubText, children: badgeSubText })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScPlanDetailsCardMobile_default.divider }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, "aria-label": "Loading plan details", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.planNameSkeleton}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.creditsSkeleton}` })
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: ScPlanDetailsCardMobile_default.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, "aria-label": "Loading plan details", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.planNameSkeleton}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.creditsSkeleton}` })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.priceSkeleton}` })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScPlanDetailsCardMobile_default.dot }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.priceSkeleton}` })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: ScPlanDetailsCardMobile_default.dot }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
     ] }) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.buttonSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.buttonSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
       ScButton,
       {
         text: upgradeButtonText,