@streamoid/ui 0.6.10 → 0.6.11

package/dist/index.js

@@ -54,6 +54,7 @@ __export(index_exports, {
   ScCxoCopilotLogo: () => ScCxoCopilotLogo,
   ScDp: () => ScDp,
   ScFieldButton: () => ScFieldButton,
+  ScFileField: () => ScFileField,
   ScGoogleSignIn: () => ScGoogleSignIn,
   ScGuide: () => ScGuide,
   ScHDivider: () => ScHDivider,
@@ -63,6 +64,8 @@ __export(index_exports, {
   ScInChatMessage: () => ScInChatMessage,
   ScIntialProfileCover: () => ScIntialProfileCover,
   ScLogoUnit: () => ScLogoUnit,
+  ScMediaApproval: () => ScMediaApproval,
+  ScMediaSelect: () => ScMediaSelect,
   ScMenuOptions: () => ScMenuOptions,
   ScMobileBottomAction: () => ScMobileBottomAction,
   ScMobileTopNav: () => ScMobileTopNav,
@@ -89,6 +92,7 @@ __export(index_exports, {
   ScReferralTableList: () => ScReferralTableList,
   ScRole: () => ScRole,
   ScRoleMobile: () => ScRoleMobile,
+  ScSelect: () => ScSelect,
   ScSelection: () => ScSelection,
   ScSelectionList: () => ScSelectionList,
   ScSettingsNav: () => ScSettingsNav,
@@ -110,8 +114,10 @@ __export(index_exports, {
   ScTableHeader: () => ScTableHeader,
   ScTableList: () => ScTableList,
   ScTableListMobile: () => ScTableListMobile,
+  ScTextArea: () => ScTextArea,
   ScTextField: () => ScTextField,
   ScThinkingStepIcon: () => ScThinkingStepIcon,
+  ScTodoList: () => ScTodoList,
   ScToggleSwitch: () => ScToggleSwitch,
   ScVDivider: () => ScVDivider,
   ScVersion: () => ScVersion,
@@ -1084,8 +1090,19 @@ var ScButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
-      className: ScButton_default.scButton + " " + className + " " + variantsClassName,
+      className: [ScButton_default.scButton, variantsClassName, className].filter(Boolean).join(" "),
+      role: "button",
+      tabIndex: state === "disabled" ? -1 : 0,
+      "aria-disabled": state === "disabled" || void 0,
       ...props,
+      onKeyDown: (e) => {
+        props.onKeyDown?.(e);
+        if (state === "disabled") return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          props.onClick?.(e);
+        }
+      },
       children: [
         noiseUrl && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "div",
@@ -7482,7 +7499,7 @@ var ScSelection = ({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: ScSelection_default.wrapper, children: [
           /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: ScSelection_default.title, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: ScSelection_default.description, children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: ScSelection_default.description, children: description })
         ] })
       ]
     }
@@ -7611,6 +7628,957 @@ var ScSelectionList = ({
   );
 };
 
+// src/SC-textArea/ScTextArea.tsx
+var import_react15 = require("react");
+
+// src/SC-textArea/ScTextArea.module.css
+var ScTextArea_default = {
+  scTextArea: "ScTextArea_scTextArea",
+  "label-group-none": "ScTextArea_label-group-none",
+  labelContainer: "ScTextArea_labelContainer",
+  label: "ScTextArea_label",
+  info: "ScTextArea_info",
+  inputContainer: "ScTextArea_inputContainer",
+  inputText: "ScTextArea_inputText",
+  "state-hover": "ScTextArea_state-hover",
+  "state-filled": "ScTextArea_state-filled",
+  "state-active": "ScTextArea_state-active",
+  "state-error": "ScTextArea_state-error",
+  "state-disabled": "ScTextArea_state-disabled"
+};
+
+// src/SC-textArea/ScTextArea.tsx
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var ScTextArea = ({
+  state,
+  labelGroup = "",
+  label = "",
+  info = "info",
+  placeholderFilled = "Placeholder",
+  className,
+  style,
+  ...props
+}) => {
+  const [focused, setFocused] = (0, import_react15.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_runtime85.jsxs)(
+    "div",
+    {
+      className: [ScTextArea_default.scTextArea, stateClass, labelGroupClass, className].filter(Boolean).join(" "),
+      style,
+      children: [
+        labelGroup && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScTextArea_default.labelContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScTextArea_default.label, children: [
+            label,
+            " "
+          ] }),
+          labelGroup === "text" && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: ScTextArea_default.info, children: [
+            info,
+            " "
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: ScTextArea_default.inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          "textarea",
+          {
+            className: ScTextArea_default.inputText,
+            placeholder: placeholderFilled,
+            ...props,
+            onFocus: (e) => {
+              setFocused(true);
+              props.onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              props.onBlur?.(e);
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/SC-select/ScSelect.tsx
+var import_react16 = require("react");
+
+// src/SC-select/ScSelect.module.css
+var ScSelect_default = {
+  scSelect: "ScSelect_scSelect",
+  "label-group-": "ScSelect_label-group-",
+  labelContainer: "ScSelect_labelContainer",
+  label: "ScSelect_label",
+  selectArea: "ScSelect_selectArea",
+  trigger: "ScSelect_trigger",
+  triggerText: "ScSelect_triggerText",
+  placeholder: "ScSelect_placeholder",
+  chevron: "ScSelect_chevron",
+  chevronOpen: "ScSelect_chevronOpen",
+  "state-filled": "ScSelect_state-filled",
+  "state-active": "ScSelect_state-active",
+  "state-disabled": "ScSelect_state-disabled",
+  menu: "ScSelect_menu",
+  option: "ScSelect_option",
+  "option-selected": "ScSelect_option-selected",
+  optionLabel: "ScSelect_optionLabel",
+  optionDescription: "ScSelect_optionDescription"
+};
+
+// src/SC-select/ScSelect.tsx
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var ScSelect = (props) => {
+  const {
+    value,
+    onChange,
+    options = [],
+    placeholder = "Select an option...",
+    label,
+    labelGroup = "",
+    disabled = false,
+    className
+  } = props;
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const rootRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  const selected = options.find((o) => o.id === value);
+  const state = disabled ? "disabled" : open ? "active" : selected ? "filled" : "default";
+  const handleToggle = () => {
+    if (disabled) return;
+    setOpen((prev) => !prev);
+  };
+  const handleSelect = (id) => {
+    if (onChange) onChange(id);
+    setOpen(false);
+  };
+  const rootClass = [
+    ScSelect_default.scSelect,
+    ScSelect_default["state-" + state],
+    labelGroup ? ScSelect_default["label-group-" + labelGroup] : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: rootClass, ref: rootRef, children: [
+    labelGroup === "label" && label ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSelect_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScSelect_default.label, children: label }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScSelect_default.selectArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: ScSelect_default.trigger,
+          onClick: handleToggle,
+          disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              "span",
+              {
+                className: [ScSelect_default.triggerText, selected ? void 0 : ScSelect_default.placeholder].filter(Boolean).join(" "),
+                children: selected ? selected.label : placeholder
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              "span",
+              {
+                className: [ScSelect_default.chevron, open ? ScSelect_default.chevronOpen : void 0].filter(Boolean).join(" "),
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                  "path",
+                  {
+                    d: "M5 7.5L10 12.5L15 7.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsxs)(
+          "div",
+          {
+            className: optionClass,
+            role: "option",
+            "aria-selected": isSelected,
+            onClick: () => handleSelect(option.id),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: ScSelect_default.optionLabel, children: option.label }),
+              option.description ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: ScSelect_default.optionDescription, children: option.description }) : null
+            ]
+          },
+          option.id
+        );
+      }) }) : null
+    ] })
+  ] });
+};
+
+// src/SC-fileField/ScFileField.tsx
+var import_react17 = require("react");
+
+// src/SC-fileField/ScFileField.module.css
+var ScFileField_default = {
+  scFileField: "ScFileField_scFileField",
+  labelContainer: "ScFileField_labelContainer",
+  label: "ScFileField_label",
+  dropzone: "ScFileField_dropzone",
+  hiddenInput: "ScFileField_hiddenInput",
+  uploadIcon: "ScFileField_uploadIcon",
+  dropzoneText: "ScFileField_dropzoneText",
+  dropzoneAction: "ScFileField_dropzoneAction",
+  acceptedText: "ScFileField_acceptedText",
+  inputContainer: "ScFileField_inputContainer",
+  fileIcon: "ScFileField_fileIcon",
+  fileInfo: "ScFileField_fileInfo",
+  fileName: "ScFileField_fileName",
+  progressTrack: "ScFileField_progressTrack",
+  progressFill: "ScFileField_progressFill",
+  clearButton: "ScFileField_clearButton",
+  errorText: "ScFileField_errorText"
+};
+
+// src/SC-fileField/ScFileField.tsx
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var ScFileField = (props) => {
+  const {
+    onFileSelect,
+    accept,
+    multiple,
+    fileName,
+    uploading,
+    progress = 0,
+    error,
+    onClear,
+    label,
+    className
+  } = props;
+  const inputRef = (0, import_react17.useRef)(null);
+  const hasFile = Boolean(fileName);
+  const isUploading = Boolean(uploading);
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  const handleChange = (e) => {
+    if (onFileSelect) {
+      onFileSelect(e.target.files);
+    }
+  };
+  const uploadIcon = /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    "svg",
+    {
+      className: ScFileField_default.uploadIcon,
+      width: "28",
+      height: "28",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M12 16V4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M7 9l5-5 5 5" })
+      ]
+    }
+  );
+  const fileIcon = /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    "svg",
+    {
+      className: ScFileField_default.fileIcon,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)("path", { d: "M14 2v6h6" })
+      ]
+    }
+  );
+  const clearIcon = /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M18 6L6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M6 6l12 12" })
+      ]
+    }
+  );
+  const rootClass = [ScFileField_default.scFileField, className].filter(Boolean).join(" ");
+  const showRow = hasFile || isUploading;
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: rootClass, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScFileField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScFileField_default.label, children: label }) }) : null,
+    showRow ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScFileField_default.inputContainer, children: [
+      fileIcon,
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScFileField_default.fileInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: ScFileField_default.fileName, children: fileName }),
+        isUploading ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScFileField_default.progressTrack, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          "div",
+          {
+            className: ScFileField_default.progressFill,
+            style: { width: clampedProgress + "%" }
+          }
+        ) }) : null
+      ] }),
+      !isUploading ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        "button",
+        {
+          type: "button",
+          className: ScFileField_default.clearButton,
+          onClick: onClear,
+          "aria-label": "Clear file",
+          children: clearIcon
+        }
+      ) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("label", { className: ScFileField_default.dropzone, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          className: ScFileField_default.hiddenInput,
+          accept,
+          multiple,
+          onChange: handleChange
+        }
+      ),
+      uploadIcon,
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScFileField_default.dropzoneText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: ScFileField_default.dropzoneAction, children: "Click to upload" }),
+        " or drag and drop"
+      ] }),
+      accept ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScFileField_default.acceptedText, children: [
+        "Accepted: ",
+        accept
+      ] }) : null
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScFileField_default.errorText, children: error }) : null
+  ] });
+};
+
+// src/SC-mediaApproval/ScMediaApproval.tsx
+var import_react18 = require("react");
+
+// src/SC-mediaApproval/ScMediaApproval.module.css
+var ScMediaApproval_default = {
+  scMediaApproval: "ScMediaApproval_scMediaApproval",
+  mediaFrame: "ScMediaApproval_mediaFrame",
+  media: "ScMediaApproval_media",
+  mediaEmpty: "ScMediaApproval_mediaEmpty",
+  spinnerOverlay: "ScMediaApproval_spinnerOverlay",
+  spinner: "ScMediaApproval_spinner",
+  spin: "ScMediaApproval_spin",
+  navButton: "ScMediaApproval_navButton",
+  navPrev: "ScMediaApproval_navPrev",
+  navNext: "ScMediaApproval_navNext",
+  counterBadge: "ScMediaApproval_counterBadge",
+  dots: "ScMediaApproval_dots",
+  dot: "ScMediaApproval_dot",
+  "state-active": "ScMediaApproval_state-active",
+  feedbackBlock: "ScMediaApproval_feedbackBlock",
+  label: "ScMediaApproval_label",
+  inputContainer: "ScMediaApproval_inputContainer",
+  textArea: "ScMediaApproval_textArea"
+};
+
+// src/SC-mediaApproval/ScMediaApproval.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var VIDEO_EXT = /\.(mp4|webm|ogg|mov|m4v)(\?.*)?$/i;
+var isVideoUrl = (url, mediaType) => {
+  if (mediaType === "video") return true;
+  if (mediaType === "image") return false;
+  return VIDEO_EXT.test(url);
+};
+var ScMediaApproval = (props) => {
+  const {
+    mediaUrls = [],
+    mediaType,
+    activeIndex,
+    onIndexChange,
+    onPreview,
+    loading,
+    feedbackLabel = "What should be changed?",
+    feedbackValue,
+    onFeedbackChange,
+    feedbackPlaceholder,
+    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)(() => {
+    if (typeof activeIndex === "number") {
+      setIndex(activeIndex);
+    }
+  }, [activeIndex]);
+  const goTo = (next) => {
+    if (total === 0) return;
+    const clamped = (next % total + total) % total;
+    if (clamped !== index) setMediaLoading(true);
+    setIndex(clamped);
+    if (onIndexChange) onIndexChange(clamped);
+  };
+  const safeIndex = total > 0 ? Math.min(index, total - 1) : 0;
+  const currentUrl = total > 0 ? mediaUrls[safeIndex] : void 0;
+  const currentIsVideo = currentUrl ? isVideoUrl(currentUrl, mediaType) : false;
+  const handlePreview = () => {
+    if (currentUrl && onPreview) onPreview(currentUrl);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: [ScMediaApproval_default.scMediaApproval, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScMediaApproval_default.mediaFrame, children: [
+      currentUrl ? currentIsVideo ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        "video",
+        {
+          className: ScMediaApproval_default.media,
+          src: currentUrl,
+          controls: true,
+          onClick: handlePreview,
+          onLoadedData: () => setMediaLoading(false)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        "img",
+        {
+          className: ScMediaApproval_default.media,
+          src: currentUrl,
+          alt: "",
+          onClick: handlePreview,
+          onLoad: () => setMediaLoading(false)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScMediaApproval_default.mediaEmpty }),
+      (loading || mediaLoading) && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScMediaApproval_default.spinnerOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        "svg",
+        {
+          className: ScMediaApproval_default.spinner,
+          width: "32",
+          height: "32",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            "path",
+            {
+              d: "M12 3a9 9 0 1 0 9 9",
+              stroke: "var(--alias-text-and-icons-fullwhite, #ffffff)",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      ) }),
+      total > 1 && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          "button",
+          {
+            type: "button",
+            className: [ScMediaApproval_default.navButton, ScMediaApproval_default.navPrev].join(" "),
+            "aria-label": "Previous",
+            onClick: () => goTo(safeIndex - 1),
+            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "path",
+              {
+                d: "M15 6L9 12L15 18",
+                stroke: "var(--alias-text-and-icons-fullwhite, #ffffff)",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          "button",
+          {
+            type: "button",
+            className: [ScMediaApproval_default.navButton, ScMediaApproval_default.navNext].join(" "),
+            "aria-label": "Next",
+            onClick: () => goTo(safeIndex + 1),
+            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "path",
+              {
+                d: "M9 6L15 12L9 18",
+                stroke: "var(--alias-text-and-icons-fullwhite, #ffffff)",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScMediaApproval_default.counterBadge, children: [
+          safeIndex + 1,
+          " / ",
+          total
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScMediaApproval_default.dots, children: mediaUrls.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Go to item " + (i + 1),
+            className: [
+              ScMediaApproval_default.dot,
+              i === safeIndex ? ScMediaApproval_default["state-active"] : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => goTo(i)
+          },
+          i
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScMediaApproval_default.feedbackBlock, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScMediaApproval_default.label, children: feedbackLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScMediaApproval_default.inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        "textarea",
+        {
+          className: ScMediaApproval_default.textArea,
+          value: feedbackValue ?? "",
+          placeholder: feedbackPlaceholder,
+          onChange: (e) => {
+            if (onFeedbackChange) onFeedbackChange(e.target.value);
+          }
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/SC-mediaSelect/ScMediaSelect.tsx
+var import_react19 = require("react");
+
+// src/SC-mediaSelect/ScMediaSelect.module.css
+var ScMediaSelect_default = {
+  scMediaSelect: "ScMediaSelect_scMediaSelect",
+  header: "ScMediaSelect_header",
+  countLabel: "ScMediaSelect_countLabel",
+  actions: "ScMediaSelect_actions",
+  linkButton: "ScMediaSelect_linkButton",
+  divider: "ScMediaSelect_divider",
+  grid: "ScMediaSelect_grid",
+  item: "ScMediaSelect_item",
+  "state-default": "ScMediaSelect_state-default",
+  "state-selected": "ScMediaSelect_state-selected",
+  media: "ScMediaSelect_media",
+  checkBadge: "ScMediaSelect_checkBadge",
+  previewButton: "ScMediaSelect_previewButton"
+};
+
+// src/SC-mediaSelect/ScMediaSelect.tsx
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var CheckBadge = () => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ScMediaSelect_default.checkBadge, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  "path",
+  {
+    d: "M3.5 7.25L6 9.75L10.5 4.75",
+    stroke: "var(--alias-text-and-icons-inverse, #101010)",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) }) });
+var MaximizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  "path",
+  {
+    d: "M15 3H21V9M9 21H3V15M21 3L14 10M3 21L10 14",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ScMediaSelect = (props) => {
+  const {
+    items = [],
+    selected = [],
+    onToggle,
+    onSelectAll,
+    onDeselectAll,
+    min = 0,
+    max,
+    mediaType = "image",
+    onPreview,
+    className
+  } = props;
+  const total = items.length;
+  const resolvedMax = typeof max === "number" ? max : total;
+  const selectedSet = (0, import_react19.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_runtime89.jsxs)("div", { className: [ScMediaSelect_default.scMediaSelect, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScMediaSelect_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ScMediaSelect_default.countLabel, children: countLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScMediaSelect_default.actions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          "button",
+          {
+            type: "button",
+            className: ScMediaSelect_default.linkButton,
+            onClick: () => onSelectAll && onSelectAll(),
+            children: "Select all"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ScMediaSelect_default.divider, children: "|" }),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          "button",
+          {
+            type: "button",
+            className: ScMediaSelect_default.linkButton,
+            onClick: () => onDeselectAll && onDeselectAll(),
+            children: "Deselect all"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.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_runtime89.jsxs)(
+        "div",
+        {
+          className: itemClass,
+          onClick: () => onToggle && onToggle(url),
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": isSelected,
+          children: [
+            mediaType === "video" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("video", { className: ScMediaSelect_default.media, src: url, muted: true, playsInline: true }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("img", { className: ScMediaSelect_default.media, src: url, alt: "" }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(CheckBadge, {}),
+            onPreview && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              "button",
+              {
+                type: "button",
+                className: ScMediaSelect_default.previewButton,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onPreview(url);
+                },
+                "aria-label": "Preview",
+                children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(MaximizeIcon, {})
+              }
+            )
+          ]
+        },
+        url + "-" + index
+      );
+    }) })
+  ] });
+};
+
+// src/SC-todoList/ScTodoList.tsx
+var import_react20 = require("react");
+
+// src/SC-todoList/ScTodoList.module.css
+var ScTodoList_default = {
+  scTodoList: "ScTodoList_scTodoList",
+  progress: "ScTodoList_progress",
+  progressIcon: "ScTodoList_progressIcon",
+  progressText: "ScTodoList_progressText",
+  rows: "ScTodoList_rows",
+  row: "ScTodoList_row",
+  checkbox: "ScTodoList_checkbox",
+  content: "ScTodoList_content",
+  "status-completed": "ScTodoList_status-completed",
+  editInput: "ScTodoList_editInput",
+  actions: "ScTodoList_actions",
+  actionButton: "ScTodoList_actionButton",
+  actionButtonDanger: "ScTodoList_actionButtonDanger",
+  addRow: "ScTodoList_addRow",
+  addInput: "ScTodoList_addInput",
+  addButton: "ScTodoList_addButton"
+};
+
+// src/SC-todoList/ScTodoList.tsx
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var ScTodoList = ({
+  items = [],
+  onToggle,
+  onEdit,
+  onDelete,
+  onAdd,
+  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 total = items.length;
+  const completed = items.filter((i) => i.status === "completed").length;
+  const startEditing = (item) => {
+    setEditingId(item.id);
+    setEditValue(item.content);
+  };
+  const commitEdit = (id) => {
+    onEdit?.(id, editValue);
+    setEditingId(null);
+    setEditValue("");
+  };
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditValue("");
+  };
+  const commitAdd = () => {
+    const trimmed = newValue.trim();
+    if (trimmed.length === 0) return;
+    onAdd?.(newValue);
+    setNewValue("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: [ScTodoList_default.scTodoList, className].filter(Boolean).join(" "), children: [
+    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: ScTodoList_default.progress, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        "svg",
+        {
+          className: ScTodoList_default.progressIcon,
+          width: "14",
+          height: "14",
+          viewBox: "0 0 14 14",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "path",
+            {
+              d: "M3 7L6 10L11 4",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: ScTodoList_default.progressText, children: [
+        completed,
+        " of ",
+        total,
+        " completed"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.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_runtime90.jsxs)("div", { className: ScTodoList_default.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime90.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_runtime90.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_runtime90.jsx)("circle", { cx: "9", cy: "9", r: "9", fill: "var(--alias-fill-base-base, #f5f5f5)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                    "path",
+                    {
+                      d: "M5.25 9L7.75 11.5L12.75 6.5",
+                      stroke: "var(--alias-text-and-icons-inverse, #101010)",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              "svg",
+              {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "circle",
+                  {
+                    cx: "9",
+                    cy: "9",
+                    r: "8.25",
+                    stroke: "var(--alias-border-default, #3e3e3e)",
+                    strokeWidth: "1.5"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+          "input",
+          {
+            className: ScTodoList_default.editInput,
+            autoFocus: true,
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: () => commitEdit(item.id),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitEdit(item.id);
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                cancelEdit();
+              }
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+          "span",
+          {
+            className: [
+              ScTodoList_default.content,
+              isCompleted ? ScTodoList_default["status-completed"] : ""
+            ].filter(Boolean).join(" "),
+            children: item.content
+          }
+        ),
+        !isEditing && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: ScTodoList_default.actions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "button",
+            {
+              type: "button",
+              className: ScTodoList_default.actionButton,
+              "aria-label": "Edit item",
+              onClick: () => startEditing(item),
+              children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime90.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",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.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_runtime90.jsx)(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime90.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",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] })
+      ] }, item.id);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: ScTodoList_default.addRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        "input",
+        {
+          className: ScTodoList_default.addInput,
+          value: newValue,
+          placeholder: addPlaceholder,
+          onChange: (e) => setNewValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitAdd();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        "button",
+        {
+          type: "button",
+          className: ScTodoList_default.addButton,
+          "aria-label": "Add item",
+          disabled: newValue.trim().length === 0,
+          onClick: commitAdd,
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "svg",
+            {
+              width: "18",
+              height: "18",
+              viewBox: "0 0 18 18",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                "path",
+                {
+                  d: "M9 4v10M4 9h10",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+
 // src/SC-Role-Mobile/ScRoleMobile.module.css
 var ScRoleMobile_default = {
   scRoleMobile: "ScRoleMobile_scRoleMobile",
@@ -7620,18 +8588,18 @@ var ScRoleMobile_default = {
 };
 
 // src/SC-Role-Mobile/ScRoleMobile.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var ScRoleMobile = ({
   role = "admin",
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "div",
     {
       className: ScRoleMobile_default.scRoleMobile + " " + ScRoleMobile_default["role-" + role] + " " + className,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: ScRoleMobile_default.text, children: role === "admin" ? "Admin" : "Member" })
     }
   );
 };
@@ -7648,7 +8616,7 @@ var ScProfileV2Mobile_default = {
 };
 
 // src/SC-Profile-V2-Mobile/ScProfileV2Mobile.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var ScProfileV2Mobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -7658,17 +8626,17 @@ var ScProfileV2Mobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  const profileImage = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  const profileImage = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScProfileV2Mobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("img", { src: imageUrl, alt: name, className: ScProfileV2Mobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: ScProfileV2Mobile_default.initials, children: initials }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "div",
     {
       className: ScProfileV2Mobile_default.scProfileV2Mobile + " " + className,
       ...props,
       children: [
         dpPosition === "left" && profileImage,
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: ScProfileV2Mobile_default.userInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: ScProfileV2Mobile_default.userName, children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: ScProfileV2Mobile_default.userInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: ScProfileV2Mobile_default.userName, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: ScProfileV2Mobile_default.userEmail, children: email })
         ] }),
         dpPosition === "right" && profileImage
       ]
@@ -7695,7 +8663,7 @@ var ScTableListMobile_default = {
 };
 
 // src/SC-tableList-mobile/ScTableListMobile.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var ScTableListMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -7708,25 +8676,25 @@ var ScTableListMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "div",
     {
       className: ScTableListMobile_default.scTableListMobile + " " + className,
       onClick: onRowClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScTableListMobile_default.profileRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScTableListMobile_default.userInfo, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScTableListMobile_default.userName, children: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScTableListMobile_default.userEmail, children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScTableListMobile_default.profileRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScTableListMobile_default.userInfo, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScTableListMobile_default.userName, children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScTableListMobile_default.userEmail, children: email })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScTableListMobile_default.initials, children: initials }) })
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScTableListMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("img", { src: imageUrl, alt: name, className: ScTableListMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScTableListMobile_default.initials, children: initials }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScTableListMobile_default.detailsRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: ScTableListMobile_default.roleText, children: role }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: ScTableListMobile_default.accessInfo, children: [
-            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
-            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScTableListMobile_default.detailsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScTableListMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScTableListMobile_default.roleText, children: role }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScTableListMobile_default.accessInfo, children: [
+            accessIcons && accessIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: accessIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) }),
+            permissionIcons && permissionIcons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScTableListMobile_default.accessGroup, children: permissionIcons.map((icon, i) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: ScTableListMobile_default.accessIcon, children: icon }, i)) })
           ] })
         ] })
       ]
@@ -7754,7 +8722,7 @@ var ScWorkspaceSwitchMobile_default = {
 };
 
 // src/SC-workspaceSwitch-Mobile/ScWorkspaceSwitchMobile.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var ScWorkspaceSwitchMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -7767,24 +8735,24 @@ var ScWorkspaceSwitchMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "div",
     {
       className: ScWorkspaceSwitchMobile_default.scWorkspaceSwitchMobile + " " + ScWorkspaceSwitchMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScWorkspaceSwitchMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: ScWorkspaceSwitchMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: ScWorkspaceSwitchMobile_default.storeName, children: storeName })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScWorkspaceSwitchMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: ScWorkspaceSwitchMobile_default.roleText, children: role }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScWorkspaceSwitchMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScWorkspaceSwitchMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: ScWorkspaceSwitchMobile_default.ownerRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: ScWorkspaceSwitchMobile_default.ownerIconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: ScWorkspaceSwitchMobile_default.ownerIcon, children: ownerIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: ScWorkspaceSwitchMobile_default.ownerText, children: ownerId })
         ] })
       ]
     }
@@ -7811,7 +8779,7 @@ var ScWorkspaceSettingsMobile_default = {
 };
 
 // src/SC-workspaceSettings-Mobile/ScWorkspaceSettingsMobile.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var ScWorkspaceSettingsMobile = ({
   storeName = "Stores",
   initials = "WS",
@@ -7826,28 +8794,28 @@ var ScWorkspaceSettingsMobile = ({
   ...props
 }) => {
   const variant = currentWs ? "current" : "other";
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     "div",
     {
       className: ScWorkspaceSettingsMobile_default.scWorkspaceSettingsMobile + " " + ScWorkspaceSettingsMobile_default["variant-" + variant] + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.workspaceInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.wsNameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScWorkspaceSettingsMobile_default.initialsBox, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: ScWorkspaceSettingsMobile_default.initialsText, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: ScWorkspaceSettingsMobile_default.storeName, children: storeName })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScWorkspaceSettingsMobile_default.roleBadge, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: ScWorkspaceSettingsMobile_default.roleText, children: role }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScWorkspaceSettingsMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScWorkspaceSettingsMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: ownerIcon && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: ownerIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: ownerId })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: ScWorkspaceSettingsMobile_default.infoRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: ScWorkspaceSettingsMobile_default.iconContainer, children: teamIcon && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: ScWorkspaceSettingsMobile_default.icon, children: teamIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: ScWorkspaceSettingsMobile_default.infoText, children: teamCount })
         ] })
       ]
     }
@@ -7870,7 +8838,7 @@ var ScMobileTopNav_default = {
 };
 
 // src/SC-MobileTopNav/ScMobileTopNav.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var ScMobileTopNav = ({
   type = "home",
   searchIcon = false,
@@ -7893,22 +8861,22 @@ var ScMobileTopNav = ({
 }) => {
   const hasBorder = type === "chat" || type === "inApp";
   const showSearch = type === "inApp" && searchIcon && search;
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
     "div",
     {
       className: ScMobileTopNav_default.scMobileTopNav + " " + (hasBorder ? ScMobileTopNav_default.withBorder : "") + " " + className,
       ...props,
       children: [
-        type === "home" && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-        type === "chat" && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+        type === "home" && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+        type === "chat" && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: ScMobileTopNav_default.chatTitle, children: chatTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMoreClick, children: moreIcon || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        showSearch && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.searchRow, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScMobileTopNav_default.searchInputContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onSearchClick, children: searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.searchInput, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               "input",
               {
                 type: "text",
@@ -7919,17 +8887,17 @@ var ScMobileTopNav = ({
               }
             ) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onCloseClick, children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) })
         ] }),
-        type === "inApp" && !search && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: ScMobileTopNav_default.heading, children: heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        type === "inApp" && !search && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconContainer, onClick: onMenuClick, children: menuIcon || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: ScMobileTopNav_default.heading, children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "div",
             {
               className: ScMobileTopNav_default.iconContainer + " " + (!searchIcon ? ScMobileTopNav_default.hidden : ""),
               onClick: onSearchClick,
-              children: searchIcon ? searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder })
+              children: searchIcon ? searchIconElement || /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScMobileTopNav_default.iconPlaceholder })
             }
           )
         ] })
@@ -7950,7 +8918,7 @@ var ScMobileBottomAction_default = {
 };
 
 // src/SC-MobileBottomAction/ScMobileBottomAction.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var ScMobileBottomAction = ({
   text = "Save Changes",
   disabled = false,
@@ -7962,28 +8930,28 @@ var ScMobileBottomAction = ({
   ...props
 }) => {
   const isTwoButton = !!secondaryText;
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "div",
     {
       className: ScMobileBottomAction_default.scMobileBottomAction + (isTwoButton ? " " + ScMobileBottomAction_default.twoButton : "") + " " + className,
       ...props,
       children: [
-        isTwoButton && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        isTwoButton && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "button",
           {
             className: ScMobileBottomAction_default.outlineButton + " " + (secondaryDisabled ? ScMobileBottomAction_default.disabled : ""),
             onClick: onSecondaryClick,
             disabled: secondaryDisabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: ScMobileBottomAction_default.outlineButtonText, children: secondaryText })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "button",
           {
             className: ScMobileBottomAction_default.button + " " + (disabled ? ScMobileBottomAction_default.disabled : ""),
             onClick,
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: ScMobileBottomAction_default.buttonText, children: text })
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: ScMobileBottomAction_default.buttonText, children: text })
           }
         )
       ]
@@ -8001,7 +8969,7 @@ var ScPopUpMenu_default = {
 };
 
 // src/SC-PopUpMenu/ScPopUpMenu.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var ScPopUpMenu = ({
   menu = "Options",
   state = "default",
@@ -8010,15 +8978,15 @@ var ScPopUpMenu = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     "div",
     {
       className: ScPopUpMenu_default.scPopUpMenu + " " + ScPopUpMenu_default["state-" + state] + " " + className,
       onClick,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: ScPopUpMenu_default.icon, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: ScPopUpMenu_default.menuText, children: menu })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: ScPopUpMenu_default.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: ScPopUpMenu_default.menuText, children: menu })
       ]
     }
   );
@@ -8044,7 +9012,7 @@ var ScReferralCardMobile_default = {
 };
 
 // src/SC-referralCard-Mobile/ScReferralCardMobile.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var ScReferralCardMobile = ({
   name = "Chris Hemsworth",
   email = "chris@kepler.com",
@@ -8057,27 +9025,27 @@ var ScReferralCardMobile = ({
   ...props
 }) => {
   const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       className: ScReferralCardMobile_default.scReferralCardMobile + " " + className,
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScReferralCardMobile_default.userRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScReferralCardMobile_default.profileSection, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScReferralCardMobile_default.userInfo, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScReferralCardMobile_default.userName, children: name }),
-              /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScReferralCardMobile_default.userEmail, children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScReferralCardMobile_default.userRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScReferralCardMobile_default.profileSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScReferralCardMobile_default.profileImage, children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("img", { src: imageUrl, alt: name, className: ScReferralCardMobile_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScReferralCardMobile_default.initials, children: initials }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScReferralCardMobile_default.userInfo, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScReferralCardMobile_default.userName, children: name }),
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScReferralCardMobile_default.userEmail, children: email })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScReferralCardMobile_default.badge, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScReferralCardMobile_default.badgeText, children: badge }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: ScReferralCardMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: ScReferralCardMobile_default.detailsRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScReferralCardMobile_default.dateText, children: date }),
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScReferralCardMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScReferralCardMobile_default.detailsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScReferralCardMobile_default.dateText, children: date }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: ScReferralCardMobile_default.creditsText, children: credits })
         ] })
       ]
     }
@@ -8094,19 +9062,19 @@ var InvoiceHistoryMobile_default = {
 };
 
 // src/SC-InvoiceHistoryMobile/InvoiceHistoryMobile.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
   amount = "\u20B9320.89",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: InvoiceHistoryMobile_default.info, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: InvoiceHistoryMobile_default.date, children: date })
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: InvoiceHistoryMobile_default.info, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: InvoiceHistoryMobile_default.invoiceId, children: invoiceId }),
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: InvoiceHistoryMobile_default.date, children: date })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: InvoiceHistoryMobile_default.amount, children: amount })
   ] });
 };
 
@@ -8124,7 +9092,7 @@ var UsageHistoryMobile_default = {
 };
 
 // src/SC-UsageHistoryMobile/UsageHistoryMobile.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var UsageHistoryMobile = ({
   serviceName = "Artifax Generation",
   credits = "50",
@@ -8133,18 +9101,18 @@ var UsageHistoryMobile = ({
   balance = "84,902",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: UsageHistoryMobile_default.row1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: UsageHistoryMobile_default.credits, children: credits })
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: UsageHistoryMobile_default.usageHistoryMobile + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: UsageHistoryMobile_default.row1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: UsageHistoryMobile_default.serviceName, children: serviceName }),
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: UsageHistoryMobile_default.credits, children: credits })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: UsageHistoryMobile_default.row2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: UsageHistoryMobile_default.metaLeft, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: UsageHistoryMobile_default.divider }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: date })
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: UsageHistoryMobile_default.row2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: UsageHistoryMobile_default.metaLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: userName }),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: UsageHistoryMobile_default.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: UsageHistoryMobile_default.metaText, children: date })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: UsageHistoryMobile_default.balance, children: balance })
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: UsageHistoryMobile_default.balance, children: balance })
     ] })
   ] });
 };
@@ -8168,7 +9136,7 @@ var ScWorkspaceSwitchMobileV2_default = {
 };
 
 // src/SC-WorkspaceSwitchMobile-V2/ScWorkspaceSwitchMobileV2.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var ScWorkspaceSwitchMobileV2 = ({
   wsName = "Workspace name is kepler",
   initials = "WS",
@@ -8181,14 +9149,14 @@ var ScWorkspaceSwitchMobileV2 = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     "div",
     {
       className: ScWorkspaceSwitchMobileV2_default.scWorkspaceSwitchMobileV2 + " " + ScWorkspaceSwitchMobileV2_default["type-" + type] + " " + className,
       onClick,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.workspaceInfo, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dpContainer, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           ScDp,
           {
             type: imageUrl ? "image" : "initial",
@@ -8202,14 +9170,14 @@ var ScWorkspaceSwitchMobileV2 = ({
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.textContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: ScWorkspaceSwitchMobileV2_default.wsName, children: wsName }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: ScWorkspaceSwitchMobileV2_default.userDetails, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.roleText + (role === "Member" ? " " + ScWorkspaceSwitchMobileV2_default.roleMember : ""), children: role }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.planText, children: plan }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: ScWorkspaceSwitchMobileV2_default.dot }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: ScWorkspaceSwitchMobileV2_default.ownerText, children: ownerId })
           ] })
         ] })
       ] })
@@ -8218,7 +9186,7 @@ var ScWorkspaceSwitchMobileV2 = ({
 };
 
 // src/SC-imageField/ScImageField.tsx
-var import_react15 = require("react");
+var import_react21 = require("react");
 
 // src/SC-imageField/ScImageField.module.css
 var ScImageField_default = {
@@ -8236,7 +9204,7 @@ var ScImageField_default = {
 
 // src/SC-imageField/ScImageField.tsx
 var import_icons62 = require("@streamoid/icons");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var ScImageField = ({
   label = "Label",
   imagePreview,
@@ -8245,7 +9213,7 @@ var ScImageField = ({
   onRemove,
   className
 }) => {
-  const inputRef = (0, import_react15.useRef)(null);
+  const inputRef = (0, import_react21.useRef)(null);
   const hasImage = !!imagePreview;
   function handleClick() {
     if (!hasImage) {
@@ -8259,8 +9227,8 @@ var ScImageField = ({
     }
     e.target.value = "";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScImageField_default.scImageField + " " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       "input",
       {
         ref: inputRef,
@@ -8270,9 +9238,9 @@ var ScImageField = ({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: ScImageField_default.label, children: label }) }),
-    hasImage ? /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScImageField_default.previewArea, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScImageField_default.labelContainer, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: ScImageField_default.label, children: label }) }),
+    hasImage ? /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScImageField_default.previewArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
         "img",
         {
           className: ScImageField_default.previewImage,
@@ -8280,8 +9248,8 @@ var ScImageField = ({
           alt: "preview"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: ScImageField_default.fileName, children: imageName || "image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
         import_icons62.SiconDelete,
         {
           className: ScImageField_default.removeIcon,
@@ -8292,9 +9260,9 @@ var ScImageField = ({
           }
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_icons62.SiconUpload, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ScImageField_default.uploadArea, onClick: handleClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_icons62.SiconUpload, { className: ScImageField_default.uploadIcon, color: "var(--alias-text-and-icons-secondary, #dadada)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: ScImageField_default.uploadText, children: "Click to upload" })
     ] })
   ] });
 };
@@ -8308,7 +9276,7 @@ var ScSettingsTabComp_default = {
 };
 
 // src/SC-settingsTabComp/ScSettingsTabComp.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var ScSettingsTabComp = ({
   tabName = "Tab",
   active = false,
@@ -8316,12 +9284,12 @@ var ScSettingsTabComp = ({
   className
 }) => {
   const variantsClassName = ScSettingsTabComp_default["active-" + active];
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "div",
     {
       className: ScSettingsTabComp_default.scSettingsTabComp + " " + variantsClassName + " " + (className ?? ""),
       onClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: ScSettingsTabComp_default.tabText, children: tabName })
     }
   );
 };
@@ -8341,7 +9309,7 @@ var ScCreditsUsageCardMobile_default = {
 
 // src/SC-Credits usage card-Mobile/ScCreditsUsageCardMobile.tsx
 var import_icons63 = require("@streamoid/icons");
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var ScCreditsUsageCardMobile = ({
   usageLabel = "Credits usage",
   usageText = "8,450 / 30,000",
@@ -8351,23 +9319,23 @@ var ScCreditsUsageCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScCreditsUsageCardMobile_default.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScCreditsUsageCardMobile_default.scCreditsUsageCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScCreditsUsageCardMobile_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
         import_icons63.SiconCredits,
         {
           className: ScCreditsUsageCardMobile_default.headerIcon,
           color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: ScCreditsUsageCardMobile_default.headerLabel, children: usageLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScCreditsUsageCardMobile_default.divider }),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: ScCreditsUsageCardMobile_default.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: ScCreditsUsageCardMobile_default.usageInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: ScCreditsUsageCardMobile_default.usageText, children: usageText }),
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: ScCreditsUsageCardMobile_default.remainingText, children: remainingText })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       ScButton,
       {
         text: buyButtonText,
@@ -8409,7 +9377,7 @@ var ScPlanDetailsCardMobile_default = {
 
 // src/SC-Plan details card-Mobile/ScPlanDetailsCardMobile.tsx
 var import_icons64 = require("@streamoid/icons");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
@@ -8423,20 +9391,20 @@ var ScPlanDetailsCardMobile = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScPlanDetailsCardMobile_default.scPlanDetailsCardMobile + " " + (className ?? ""), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScPlanDetailsCardMobile_default.headerLeft, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           import_icons64.SiconBilling,
           {
             className: ScPlanDetailsCardMobile_default.headerIcon,
             color: "var(--alias-text-and-icons-tertiary, #9e9e9e)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScPlanDetailsCardMobile_default.headerLabel, children: currentPlanLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScPlanDetailsCardMobile_default.badgeGroup, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.badgeSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScPlanDetailsCardMobile_default.badgeGroup, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.badgeSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           ScBadges,
           {
             text: badgeText,
@@ -8445,28 +9413,28 @@ var ScPlanDetailsCardMobile = ({
             className: ScPlanDetailsCardMobile_default.scBadgesInstance
           }
         ),
-        badgeSubText && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeDot }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeSubText, children: badgeSubText })
+        badgeSubText && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeDot }),
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScPlanDetailsCardMobile_default.badgeSubText, children: badgeSubText })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScPlanDetailsCardMobile_default.divider }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, "aria-label": "Loading plan details", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.planNameSkeleton}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.creditsSkeleton}` })
+    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScPlanDetailsCardMobile_default.divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScPlanDetailsCardMobile_default.planInfo, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, "aria-label": "Loading plan details", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.planNameSkeleton}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.creditsSkeleton}` })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.priceSkeleton}` })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScPlanDetailsCardMobile_default.dot }),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.priceSkeleton}` })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: ScPlanDetailsCardMobile_default.planNameRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planName }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScPlanDetailsCardMobile_default.dot }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: ScPlanDetailsCardMobile_default.planName, children: planCredits })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: ScPlanDetailsCardMobile_default.planPrice, children: planPrice })
     ] }) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.buttonSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `${ScPlanDetailsCardMobile_default.skeletonPill} ${ScPlanDetailsCardMobile_default.buttonSkeleton}` }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
       ScButton,
       {
         text: upgradeButtonText,