master-components-react-ts 1.0.13 → 1.1.0

package/dist/components/FormInput/FormInput.js

@@ -0,0 +1,144 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./FormInput.module.scss.js";
+import { useRef, useState, useEffect } from "react";
+import { IconSearch } from "../../assets/Icons/IconSearch.js";
+import { IconCloseCircle } from "../../assets/Icons/IconCloseCircle.js";
+const FormInput = ({
+  label,
+  placeholder,
+  helperText,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  withFocus = true,
+  withActive = true,
+  searchComponent = false,
+  size = "md",
+  toggleFocus = false,
+  rightSlot,
+  leftSlot,
+  helperSlot,
+  type = "text",
+  value,
+  maxLength,
+  forDropdown = false,
+  customFocus = null,
+  focus = false,
+  inputState = { error: false, success: false, loading: false },
+  inputSlot,
+  onChange,
+  onFocus,
+  onBlur,
+  onEnter,
+  onFocusChange,
+  formInputWrapperStyle,
+  inputWrapperStyle,
+  formInputStyle,
+  helperTextStyle,
+  labelStyle,
+  inputSlotStyle
+}) => {
+  const InputRef = useRef(null);
+  const [SearchValue, setSearchValue] = useState(value ?? "");
+  const [Focused, setFocused] = useState(false);
+  const [Active, setActive] = useState(false);
+  const Change = (event) => {
+    if (searchComponent) {
+      setSearchValue(event.target.value);
+    }
+    onChange?.(event.target.value);
+  };
+  const Focus = () => {
+    onFocus?.();
+    if (forDropdown) return;
+    setFocused(true);
+  };
+  const Blur = () => {
+    if (!toggleFocus) {
+      setFocused(false);
+    } else {
+      setFocused(customFocus ?? false);
+    }
+    onBlur?.();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      onEnter?.();
+    }
+  };
+  const getSlot = (slot) => {
+    return slot;
+  };
+  const HandleSearch = () => {
+    if (!searchComponent) return;
+    setSearchValue("");
+    onChange?.("");
+  };
+  useEffect(() => {
+    onFocusChange?.(Focused);
+  }, [Focused]);
+  useEffect(() => {
+    if (customFocus !== void 0 && customFocus !== null) {
+      setFocused(customFocus);
+    }
+  }, [customFocus]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.inputWrapper} ${disabled ? style.disabled : ""} ${style[size]}`, style: inputWrapperStyle ?? {}, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.formInputLabelWrapper, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { style: labelStyle ?? {}, className: style.formInputLabel, children: [
+        label,
+        " ",
+        typeof label === "string" && required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style.formInputRequired, children: "*" })
+      ] }),
+      helperSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputHelperSlot, children: getSlot(helperSlot) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: `${style.formInputWrapper} ${inputState.error ? style.errorState : ""} ${withFocus && Focused ? !inputState.error ? style.focused : style.errorFocused : ""} ${withActive && Active ? !inputState.error ? style.active : style.errorActive : ""} ${inputState.error ? style.error : ""} ${inputState.success ? style.success : ""}`,
+        style: formInputWrapperStyle ?? {},
+        onClick: () => toggleFocus && setFocused((state) => !state),
+        children: [
+          leftSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: getSlot(leftSlot) }),
+          searchComponent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: getSlot(/* @__PURE__ */ jsxRuntimeExports.jsx(IconSearch, {})) }),
+          inputSlot ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              className: style.formInput,
+              ref: InputRef,
+              style: formInputStyle ?? {},
+              type: type ?? "text",
+              value: searchComponent ? SearchValue : value,
+              onChange: (event) => Change(event),
+              onMouseDown: () => !forDropdown && setActive(true),
+              onMouseUp: () => !forDropdown && setActive(false),
+              onMouseLeave: () => !forDropdown && setActive(false),
+              onFocus: Focus,
+              onBlur: Blur,
+              disabled,
+              required,
+              onKeyDown: handleKeyDown,
+              readOnly,
+              spellCheck: false,
+              placeholder: placeholder ?? "",
+              autoComplete: "off",
+              maxLength
+            }
+          ),
+          rightSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: getSlot(rightSlot) }),
+          searchComponent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {})) : null }) })
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: helperTextStyle ?? {},
+        className: `${style.formInputHelperText} ${inputState.error ? style.errorHelperText : inputState.success ? style.successHelperText : ""}`,
+        children: helperText
+      }
+    )
+  ] });
+};
+export {
+  FormInput as default
+};

package/dist/components/FormInput/FormInput.module.scss.js

@@ -0,0 +1,62 @@
+const inputWrapper = "FormInput-module__inputWrapper";
+const sm = "FormInput-module__sm";
+const formInputWrapper = "FormInput-module__formInputWrapper";
+const md = "FormInput-module__md";
+const disabled = "FormInput-module__disabled";
+const formInputLabel = "FormInput-module__formInputLabel";
+const formInput = "FormInput-module__formInput";
+const formInputHelperText = "FormInput-module__formInputHelperText";
+const formInputLabelWrapper = "FormInput-module__formInputLabelWrapper";
+const formInputRequired = "FormInput-module__formInputRequired";
+const formInputHelperSlot = "FormInput-module__formInputHelperSlot";
+const errorState = "FormInput-module__errorState";
+const focused = "FormInput-module__focused";
+const active = "FormInput-module__active";
+const errorFocused = "FormInput-module__errorFocused";
+const errorActive = "FormInput-module__errorActive";
+const formInputSlot = "FormInput-module__formInputSlot";
+const errorHelperText = "FormInput-module__errorHelperText";
+const successHelperText = "FormInput-module__successHelperText";
+const style = {
+  inputWrapper,
+  sm,
+  formInputWrapper,
+  md,
+  disabled,
+  formInputLabel,
+  formInput,
+  formInputHelperText,
+  formInputLabelWrapper,
+  formInputRequired,
+  formInputHelperSlot,
+  errorState,
+  focused,
+  active,
+  errorFocused,
+  errorActive,
+  formInputSlot,
+  errorHelperText,
+  successHelperText
+};
+export {
+  active,
+  style as default,
+  disabled,
+  errorActive,
+  errorFocused,
+  errorHelperText,
+  errorState,
+  focused,
+  formInput,
+  formInputHelperSlot,
+  formInputHelperText,
+  formInputLabel,
+  formInputLabelWrapper,
+  formInputRequired,
+  formInputSlot,
+  formInputWrapper,
+  inputWrapper,
+  md,
+  sm,
+  successHelperText
+};

package/dist/components/MainButton/MainButton.js

@@ -0,0 +1,72 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./MainButton.module.scss.js";
+import { useState, useRef, useEffect } from "react";
+import IconCircularLoading from "../../assets/Icons/IconCircularLoading.js";
+const MainButton = ({
+  label,
+  size = "md",
+  leftSlot,
+  rightSlot,
+  buttonSlot,
+  type = "button",
+  colorType = "neutral",
+  buttonType = "primary",
+  withFocus = false,
+  customFocus,
+  disabled,
+  loading = false,
+  spaceBetween = false,
+  buttonStyle,
+  mainButtonContentStyle,
+  mainButtonLabelStyle,
+  leftSlotStyle,
+  rightSlotStyle,
+  onClick
+}) => {
+  const [Focused, setFocused] = useState(customFocus || false);
+  const ButtonRef = useRef(null);
+  const Click = (e) => {
+    if (disabled || loading) return;
+    if (withFocus) {
+      setFocused((state) => !state);
+    }
+    onClick?.(e);
+  };
+  const getLoadingColor = () => {
+    let color = "#ffffff";
+    if (colorType === "neutral" && buttonType !== "primary") color = "#0058FF";
+    if (colorType === "positive" && buttonType !== "primary") color = "#328707";
+    if (colorType === "negative" && buttonType !== "primary") color = "#E3292F";
+    return color;
+  };
+  useEffect(() => {
+    const ClickHandler = (event) => {
+      if (!ButtonRef.current || disabled) return;
+      if (event.composedPath().includes(ButtonRef.current)) return;
+      setFocused(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      ref: ButtonRef,
+      style: buttonStyle,
+      type,
+      disabled,
+      className: `${style.mainButton} ${style[size]} ${loading ? style.loading : ""} ${Focused ? style.focused : ""} ${style[buttonType]} ${style[colorType]} ${disabled ? style.disabled : ""}`,
+      onClick: Click,
+      children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
+        leftSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.leftSlot, style: leftSlotStyle, children: leftSlot }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
+        rightSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.rightSlot, style: rightSlotStyle, children: rightSlot })
+      ] })
+    }
+  );
+};
+export {
+  MainButton as default
+};

package/dist/components/MainButton/MainButton.module.scss.js

@@ -0,0 +1,56 @@
+const mainButton = "MainButton-module__mainButton";
+const sm = "MainButton-module__sm";
+const md = "MainButton-module__md";
+const lg = "MainButton-module__lg";
+const mainButtonContent = "MainButton-module__mainButtonContent";
+const mainButtonLabel = "MainButton-module__mainButtonLabel";
+const primary = "MainButton-module__primary";
+const neutral = "MainButton-module__neutral";
+const loading = "MainButton-module__loading";
+const disabled = "MainButton-module__disabled";
+const focused = "MainButton-module__focused";
+const positive = "MainButton-module__positive";
+const negative = "MainButton-module__negative";
+const secondary = "MainButton-module__secondary";
+const tertiary = "MainButton-module__tertiary";
+const tertiaryV2 = "MainButton-module__tertiaryV2";
+const tertiaryV3 = "MainButton-module__tertiaryV3";
+const style = {
+  mainButton,
+  sm,
+  md,
+  lg,
+  mainButtonContent,
+  mainButtonLabel,
+  primary,
+  neutral,
+  loading,
+  disabled,
+  focused,
+  positive,
+  negative,
+  secondary,
+  tertiary,
+  tertiaryV2,
+  tertiaryV3
+};
+export {
+  style as default,
+  disabled,
+  focused,
+  lg,
+  loading,
+  mainButton,
+  mainButtonContent,
+  mainButtonLabel,
+  md,
+  negative,
+  neutral,
+  positive,
+  primary,
+  secondary,
+  sm,
+  tertiary,
+  tertiaryV2,
+  tertiaryV3
+};

package/dist/components/NotificationToast/NotificationContext.js

@@ -0,0 +1,57 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { createContext, useState, useCallback } from "react";
+import NotificationToast from "./NotificationToast.js";
+import style from "./NotificationToast.module.scss.js";
+const ToastContext = createContext(null);
+let idCounter = 0;
+const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const showToast = (props) => {
+    setToasts((prev) => {
+      const max = props.max ?? Infinity;
+      if (prev.length >= max) return prev;
+      const id = idCounter++;
+      setTimeout(() => {
+        setToasts((prev2) => prev2.filter((t) => t.id !== id));
+      }, props.timeout || 4e3);
+      return [...prev, { id, props }];
+    });
+  };
+  const getPosition = useCallback(() => {
+    if (toasts.length > 0) {
+      switch (toasts[0]?.props?.position) {
+        case "top-left":
+          return { top: "20px", left: "20px" };
+        case "top-right":
+          return { top: "20px", right: "20px" };
+        case "bottom-left":
+          return { bottom: "20px", left: "20px" };
+        case "bottom-right":
+          return { bottom: "20px", right: "20px" };
+        case "top-center":
+          return { top: "20px", left: "50%", transform: "translateX(-50%)" };
+        case "bottom-center":
+          return { bottom: "20px", left: "50%", transform: "translateX(-50%)" };
+        default:
+          return {};
+      }
+    }
+  }, [toasts.length]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ToastContext.Provider, { value: { showToast }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      NotificationToast,
+      {
+        ...props,
+        onClose: () => {
+          setToasts((prev) => prev.filter((t) => t.id !== id));
+        }
+      },
+      id
+    )) })
+  ] });
+};
+export {
+  ToastContext,
+  ToastProvider as default
+};

package/dist/components/NotificationToast/NotificationToast.js

@@ -0,0 +1,66 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { IconCloseBlack } from "../../assets/Icons/IconClose.js";
+import style from "./NotificationToast.module.scss.js";
+import { useState, useEffect } from "react";
+import { IconExclamation } from "../../assets/Icons/IconExclamation.js";
+import { IconCheck } from "../../assets/Icons/IconCheck.js";
+const NotificationToast = ({
+  title,
+  colorType = "neutral",
+  filled = false,
+  withClose = false,
+  withUndo = false,
+  withInfoIcon = true,
+  description,
+  customAction,
+  timeout = 4e3,
+  children,
+  onUndo,
+  onClose
+}) => {
+  const [animationClass, setAnimationClass] = useState("fadeIn");
+  useEffect(() => {
+    const duration = timeout;
+    const fadeDuration = 300;
+    const hideTimeout = setTimeout(() => {
+      setAnimationClass("fadeOut");
+      setTimeout(() => {
+        onClose?.();
+      }, fadeDuration);
+    }, duration);
+    return () => {
+      clearTimeout(hideTimeout);
+    };
+  }, [onClose]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `${style.notificationToast} ${style[colorType]} ${filled ? style.filled : ""} ${style[animationClass]}`,
+      style: description ? { padding: "12px" } : {},
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
+          withInfoIcon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheck, { color: filled ? "#328707" : "#fff" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconExclamation, { color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentLeftText, children: [
+            title && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentLeftTextTitle, children: title }),
+            description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentLeftTextDescription, children: description }),
+            children && children
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentDescription }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentRight, children: [
+          customAction && customAction,
+          !description && withUndo && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
+          withClose && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconCloseBlack,
+            {
+              color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  NotificationToast as default
+};

package/dist/components/NotificationToast/NotificationToast.module.scss.js

@@ -0,0 +1,59 @@
+const toastContainer = "NotificationToast-module__toastContainer";
+const notificationToast = "NotificationToast-module__notificationToast";
+const fadeIn = "NotificationToast-module__fadeIn";
+const fadeOut = "NotificationToast-module__fadeOut";
+const neutral = "NotificationToast-module__neutral";
+const filled = "NotificationToast-module__filled";
+const notificationToastContentLeftTextTitle = "NotificationToast-module__notificationToastContentLeftTextTitle";
+const notificationToastContentRightUndoText = "NotificationToast-module__notificationToastContentRightUndoText";
+const notificationToastContentLeftTextDescription = "NotificationToast-module__notificationToastContentLeftTextDescription";
+const info = "NotificationToast-module__info";
+const error = "NotificationToast-module__error";
+const success = "NotificationToast-module__success";
+const notificationToastContent = "NotificationToast-module__notificationToastContent";
+const notificationToastContentLeft = "NotificationToast-module__notificationToastContentLeft";
+const notificationToastContentInfoIcon = "NotificationToast-module__notificationToastContentInfoIcon";
+const notificationToastContentLeftText = "NotificationToast-module__notificationToastContentLeftText";
+const notificationToastContentRight = "NotificationToast-module__notificationToastContentRight";
+const notificationToastContentRightClose = "NotificationToast-module__notificationToastContentRightClose";
+const style = {
+  toastContainer,
+  notificationToast,
+  fadeIn,
+  fadeOut,
+  neutral,
+  filled,
+  notificationToastContentLeftTextTitle,
+  notificationToastContentRightUndoText,
+  notificationToastContentLeftTextDescription,
+  info,
+  error,
+  success,
+  notificationToastContent,
+  notificationToastContentLeft,
+  notificationToastContentInfoIcon,
+  notificationToastContentLeftText,
+  notificationToastContentRight,
+  notificationToastContentRightClose
+};
+export {
+  style as default,
+  error,
+  fadeIn,
+  fadeOut,
+  filled,
+  info,
+  neutral,
+  notificationToast,
+  notificationToastContent,
+  notificationToastContentInfoIcon,
+  notificationToastContentLeft,
+  notificationToastContentLeftText,
+  notificationToastContentLeftTextDescription,
+  notificationToastContentLeftTextTitle,
+  notificationToastContentRight,
+  notificationToastContentRightClose,
+  notificationToastContentRightUndoText,
+  success,
+  toastContainer
+};

package/dist/components/NotificationToast/createNotificationToast.js

@@ -0,0 +1,10 @@
+import { ToastContext } from "./NotificationContext.js";
+import { useContext } from "react";
+const createNotificationToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("createNotificationToast must be used within ToastProvider");
+  return context.showToast;
+};
+export {
+  createNotificationToast as default
+};

package/dist/components/Popup/Popup.js

@@ -0,0 +1,116 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./Popup.module.scss.js";
+import { IconCheckCircle } from "../../assets/Icons/IconCheckCircle.js";
+import { IconSave } from "../../assets/Icons/IconSave.js";
+import { IconTrash } from "../../assets/Icons/IconTrash.js";
+import { useRef, useEffect } from "react";
+import { IconCloseBlack } from "../../assets/Icons/IconClose.js";
+const Popup = ({
+  visible,
+  template,
+  options,
+  children,
+  onClickOutside,
+  onClose,
+  widthType,
+  // "horizontal"
+  modalOverlayStyle,
+  popupContainerStyle,
+  templateWrapperStyle,
+  popupHeaderStyle,
+  popupTitleStyle,
+  closeButtonStyle
+}) => {
+  const _getType = () => {
+    if (!options || !options?.type) return;
+    switch (String(options?.type)) {
+      case "delete": {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(IconTrash, {});
+      }
+      case "unsaved": {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(IconSave, {});
+      }
+      case "success": {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheckCircle, {});
+      }
+    }
+  };
+  const ClickClose = () => {
+    if (onClose && typeof onClose === "function") {
+      onClose();
+    }
+  };
+  const componentRef = useRef(null);
+  const handleClick = (event) => {
+    const clickedElement = event.target;
+    if (clickedElement === componentRef.current) {
+      if (onClickOutside && typeof onClickOutside === "function") {
+        onClickOutside();
+      }
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+  return visible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: componentRef,
+      style: modalOverlayStyle ?? {},
+      className: `
+                    ${style.modalOverlay}
+                    ${options && options?.mode === "drawer" ? style.popupDrawerMode : ""}
+                `,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          style: popupContainerStyle ?? {},
+          className: `
+                        mcPopup_global
+                        ${style.popupContainer}
+                        ${options?.type ? style.withOptions : ""}
+                        ${widthType === "horizontal" ? style.horizontal : ""}
+                    `,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.closeButton, style: closeButtonStyle ?? {}, onClick: ClickClose, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              IconCloseBlack,
+              {
+                color: "#131314"
+              }
+            ) }),
+            (options?.title || options?.description || options?.type) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.popupHeader}`, style: popupHeaderStyle ?? {}, children: [
+              _getType() && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.typeIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  style: { backgroundColor: options?.type === "success" ? "#DCFAE6" : options?.type === "unsaved" ? "#FEF0C7" : "#FEE4E2" },
+                  className: style.icon,
+                  children: _getType()
+                }
+              ) }),
+              options && options?.title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.popupTitle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { style: popupTitleStyle ?? {}, children: [
+                " ",
+                options?.title ?? "",
+                " "
+              ] }) }),
+              options && options?.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.popupDescription, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+                " ",
+                options?.description ?? "",
+                " "
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.templateWrapper, style: templateWrapperStyle ?? {}, children: [
+              template && template,
+              children && children
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Popup as default
+};