master-components-react-ts 2.1.9 → 2.1.10

package/dist/components/FormInput/FormInput.js

@@ -1,151 +1 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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) => {
-    const input = event.currentTarget.value;
-    const isFirstCharacter = input.length === 0;
-    if (type === "number") {
-      if (event.keyCode === 69 || !isFirstCharacter && (event.keyCode === 187 || event.keyCode === 107 || event.keyCode === 189 || event.keyCode === 109)) {
-        event.preventDefault();
-      }
-    }
-    if (event.key === "Enter" && input && input.length > 0) {
-      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__ */ jsxs("div", { className: `${style.inputWrapper} ${disabled ? style.disabled : ""} ${style[size]}`, style: inputWrapperStyle ?? {}, children: [
-    label && /* @__PURE__ */ jsxs("div", { className: style.formInputLabelWrapper, children: [
-      /* @__PURE__ */ jsxs("label", { style: labelStyle ?? {}, className: style.formInputLabel, children: [
-        label,
-        " ",
-        typeof label === "string" && required && /* @__PURE__ */ jsx("span", { className: style.formInputRequired, children: "*" })
-      ] }),
-      helperSlot && /* @__PURE__ */ jsx("div", { className: style.formInputHelperSlot, children: getSlot(helperSlot) })
-    ] }),
-    /* @__PURE__ */ 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__ */ jsx("div", { className: style.formInputSlot, children: getSlot(leftSlot) }),
-          searchComponent && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: getSlot(/* @__PURE__ */ jsx(IconSearch, {})) }),
-          inputSlot ? /* @__PURE__ */ jsx("div", { className: style.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ 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__ */ jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: getSlot(rightSlot) }),
-          searchComponent && /* @__PURE__ */ jsx("div", { className: style.formInputSlot, children: /* @__PURE__ */ jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsx(IconCloseCircle, {})) : null }) })
-        ]
-      }
-    ),
-    helperText && /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: helperTextStyle ?? {},
-        className: `${style.formInputHelperText} ${inputState.error ? style.errorHelperText : inputState.success ? style.successHelperText : ""}`,
-        children: helperText
-      }
-    )
-  ] });
-};
-export {
-  FormInput as default
-};
+import{jsxs as n,jsx as s}from"react/jsx-runtime";import e from"./FormInput.module.scss.js";import{useRef as _,useState as p,useEffect as L}from"react";import{IconSearch as ee}from"../../assets/Icons/IconSearch.js";import{IconCloseCircle as re}from"../../assets/Icons/IconCloseCircle.js";const fe=({label:u,placeholder:M,helperText:y,required:I=!1,disabled:h=!1,readOnly:R=!1,withFocus:T=!0,withActive:W=!0,searchComponent:l=!1,size:b="md",toggleFocus:N=!1,rightSlot:v,leftSlot:$,helperSlot:k,type:g="text",value:x,maxLength:j,forDropdown:f=!1,customFocus:o=null,focus:se=!1,inputState:a={error:!1,success:!1,loading:!1},inputSlot:C,onChange:H,onFocus:B,onBlur:E,onEnter:F,onFocusChange:K,formInputWrapperStyle:V,inputWrapperStyle:D,formInputStyle:U,helperTextStyle:q,labelStyle:w,inputSlotStyle:z})=>{const G=_(null),[S,A]=p(x??""),[i,t]=p(!1),[J,d]=p(!1),O=r=>{l&&A(r.target.value),H?.(r.target.value)},P=()=>{B?.(),!f&&t(!0)},Q=()=>{t(N?o??!1:!1),E?.()},X=r=>{const m=r.currentTarget.value,Z=m.length===0;g==="number"&&(r.keyCode===69||!Z&&(r.keyCode===187||r.keyCode===107||r.keyCode===189||r.keyCode===109))&&r.preventDefault(),r.key==="Enter"&&m&&m.length>0&&F?.()},c=r=>r,Y=()=>{l&&(A(""),H?.(""))};return L(()=>{K?.(i)},[i]),L(()=>{o!=null&&t(o)},[o]),n("div",{className:`${e.inputWrapper} ${h?e.disabled:""} ${e[b]}`,style:D??{},children:[u&&n("div",{className:e.formInputLabelWrapper,children:[n("label",{style:w??{},className:e.formInputLabel,children:[u," ",typeof u=="string"&&I&&s("span",{className:e.formInputRequired,children:"*"})]}),k&&s("div",{className:e.formInputHelperSlot,children:c(k)})]}),n("div",{className:`${e.formInputWrapper} ${a.error?e.errorState:""} ${T&&i?a.error?e.errorFocused:e.focused:""} ${W&&J?a.error?e.errorActive:e.active:""} ${a.error?e.error:""} ${a.success?e.success:""}`,style:V??{},onClick:()=>N&&t(r=>!r),children:[$&&s("div",{className:e.formInputSlot,children:c($)}),l&&s("div",{className:e.formInputSlot,children:c(s(ee,{}))}),C?s("div",{className:e.formInputSlot,style:z??{},children:c(C)}):s("input",{className:e.formInput,ref:G,style:U??{},type:g??"text",value:l?S:x,onChange:r=>O(r),onMouseDown:()=>!f&&d(!0),onMouseUp:()=>!f&&d(!1),onMouseLeave:()=>!f&&d(!1),onFocus:P,onBlur:Q,disabled:h,required:I,onKeyDown:X,readOnly:R,spellCheck:!1,placeholder:M??"",autoComplete:"off",maxLength:j}),v&&s("div",{style:l?{cursor:"pointer"}:{},className:e.formInputSlot,children:c(v)}),l&&s("div",{className:e.formInputSlot,children:s("div",{onClick:Y,style:l?{cursor:"pointer"}:{},className:e.formInputSlot,children:S?.length>0?c(s(re,{})):null})})]}),y&&s("p",{style:q??{},className:`${e.formInputHelperText} ${a.error?e.errorHelperText:a.success?e.successHelperText:""}`,children:y})]})};export{fe as default};

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

@@ -1,62 +1 @@
-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
-};
+const r="FormInput-module__inputWrapper",e="FormInput-module__sm",o="FormInput-module__formInputWrapper",t="FormInput-module__md",u="FormInput-module__disabled",p="FormInput-module__formInputLabel",m="FormInput-module__formInput",n="FormInput-module__formInputHelperText",l="FormInput-module__formInputLabelWrapper",s="FormInput-module__formInputRequired",I="FormInput-module__formInputHelperSlot",c="FormInput-module__errorState",d="FormInput-module__focused",_="FormInput-module__active",f="FormInput-module__errorFocused",a="FormInput-module__errorActive",F="FormInput-module__formInputSlot",i="FormInput-module__errorHelperText",H="FormInput-module__successHelperText",x={inputWrapper:r,sm:e,formInputWrapper:o,md:t,disabled:u,formInputLabel:p,formInput:m,formInputHelperText:n,formInputLabelWrapper:l,formInputRequired:s,formInputHelperSlot:I,errorState:c,focused:d,active:_,errorFocused:f,errorActive:a,formInputSlot:F,errorHelperText:i,successHelperText:H};export{_ as active,x as default,u as disabled,a as errorActive,f as errorFocused,i as errorHelperText,c as errorState,d as focused,m as formInput,I as formInputHelperSlot,n as formInputHelperText,p as formInputLabel,l as formInputLabelWrapper,s as formInputRequired,F as formInputSlot,o as formInputWrapper,r as inputWrapper,t as md,e as sm,H as successHelperText};

package/dist/components/InlineLoading/InlineLoading.js

@@ -1,24 +1 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import style from "./InlineLoading.module.scss.js";
-import { IconErrorDash } from "../../assets/Icons/IconErrorDash.js";
-import { IconLoading } from "../../assets/Icons/IconLoading.js";
-import { IconSuccess } from "../../assets/Icons/IconSuccess.js";
-const InlineLoading = ({ loading, success, error, msg }) => {
-  return /* @__PURE__ */ jsxs("div", { className: `${style.inlineLoadingWrapper}`, children: [
-    loading?.state && /* @__PURE__ */ jsxs("div", { className: style.loading, children: [
-      /* @__PURE__ */ jsx(IconLoading, { color1: loading?.color1 ?? "#BCC1C2", color2: loading?.color2, size: loading?.size }),
-      /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
-    ] }),
-    !loading?.state && success?.state && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(IconSuccess, { size: success?.size, color: success?.color }),
-      /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
-    ] }),
-    !loading?.state && error?.state && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(IconErrorDash, { size: error?.size, color: error?.color }),
-      /* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
-    ] })
-  ] });
-};
-export {
-  InlineLoading as default
-};
+import{jsxs as r,jsx as o}from"react/jsx-runtime";import s from"./InlineLoading.module.scss.js";import{IconErrorDash as c}from"../../assets/Icons/IconErrorDash.js";import{IconLoading as n}from"../../assets/Icons/IconLoading.js";import{IconSuccess as a}from"../../assets/Icons/IconSuccess.js";const f=({loading:e,success:i,error:l,msg:t})=>r("div",{className:`${s.inlineLoadingWrapper}`,children:[e?.state&&r("div",{className:s.loading,children:[o(n,{color1:e?.color1??"#BCC1C2",color2:e?.color2,size:e?.size}),o("span",{style:t?.style??{},children:t?.text??""})]}),!e?.state&&i?.state&&r("div",{children:[o(a,{size:i?.size,color:i?.color}),o("span",{style:t?.style??{},children:t?.text??""})]}),!e?.state&&l?.state&&r("div",{children:[o(c,{size:l?.size,color:l?.color}),o("span",{style:t?.style??{},children:t?.text??""})]})]});export{f as default};

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

@@ -1,11 +1 @@
-const inlineLoadingWrapper = "InlineLoading-module__inlineLoadingWrapper";
-const loading = "InlineLoading-module__loading";
-const style = {
-  inlineLoadingWrapper,
-  loading
-};
-export {
-  style as default,
-  inlineLoadingWrapper,
-  loading
-};
+const n="InlineLoading-module__inlineLoadingWrapper",i="InlineLoading-module__loading",o={inlineLoadingWrapper:n,loading:i};export{o as default,n as inlineLoadingWrapper,i as loading};

package/dist/components/MainButton/MainButton.js

@@ -1,72 +1 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ 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__ */ jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxs("div", { className: style.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
-        leftSlot && /* @__PURE__ */ jsx("div", { className: style.leftSlot, style: leftSlotStyle, children: leftSlot }),
-        /* @__PURE__ */ jsx("p", { className: style.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
-        rightSlot && /* @__PURE__ */ jsx("div", { className: style.rightSlot, style: rightSlotStyle, children: rightSlot })
-      ] })
-    }
-  );
-};
-export {
-  MainButton as default
-};
+import{jsx as n,jsxs as x}from"react/jsx-runtime";import e from"./MainButton.module.scss.js";import{useState as R,useRef as w,useEffect as z}from"react";import H from"../../assets/Icons/IconCircularLoading.js";const q=({label:m,size:d="md",leftSlot:o,rightSlot:f,buttonSlot:v,type:p="button",colorType:r="neutral",buttonType:s="primary",withFocus:C=!1,customFocus:$,disabled:i,loading:c=!1,spaceBetween:h=!1,buttonStyle:k,mainButtonContentStyle:y,mainButtonLabelStyle:B,leftSlotStyle:F,rightSlotStyle:L,onClick:N})=>{const[E,u]=R($||!1),a=w(null),g=t=>{i||c||(C&&u(l=>!l),N?.(t))},j=()=>{let t="#ffffff";return r==="neutral"&&s!=="primary"&&(t="#0058FF"),r==="positive"&&s!=="primary"&&(t="#328707"),r==="negative"&&s!=="primary"&&(t="#E3292F"),t};return z(()=>{const t=l=>{!a.current||i||l.composedPath().includes(a.current)||u(!1)};return document.addEventListener("click",t),()=>{document.removeEventListener("click",t)}},[]),n("button",{ref:a,style:k,type:p,disabled:i,className:`${e.mainButton} ${e[d]} ${c?e.loading:""} ${E?e.focused:""} ${e[s]} ${e[r]} ${i?e.disabled:""}`,onClick:g,children:c?n(H,{size:20,stroke:j()}):v||x("div",{className:e.mainButtonContent,style:{...y,justifyContent:h?"space-between":"center"},children:[o&&n("div",{className:e.leftSlot,style:F,children:o}),n("p",{className:e.mainButtonLabel,style:B,children:m}),f&&n("div",{className:e.rightSlot,style:L,children:f})]})})};export{q as default};

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

@@ -1,56 +1 @@
-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
-};
+const t="MainButton-module__mainButton",n="MainButton-module__sm",o="MainButton-module__md",a="MainButton-module__lg",e="MainButton-module__mainButtonContent",i="MainButton-module__mainButtonLabel",u="MainButton-module__primary",d="MainButton-module__neutral",m="MainButton-module__loading",s="MainButton-module__disabled",l="MainButton-module__focused",_="MainButton-module__positive",r="MainButton-module__negative",B="MainButton-module__secondary",c="MainButton-module__tertiary",M="MainButton-module__tertiaryV2",y="MainButton-module__tertiaryV3",g={mainButton:t,sm:n,md:o,lg:a,mainButtonContent:e,mainButtonLabel:i,primary:u,neutral:d,loading:m,disabled:s,focused:l,positive:_,negative:r,secondary:B,tertiary:c,tertiaryV2:M,tertiaryV3:y};export{g as default,s as disabled,l as focused,a as lg,m as loading,t as mainButton,e as mainButtonContent,i as mainButtonLabel,o as md,r as negative,d as neutral,_ as positive,u as primary,B as secondary,n as sm,c as tertiary,M as tertiaryV2,y as tertiaryV3};

package/dist/components/NotificationToast/NotificationContext.js

@@ -1,57 +1 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsxs(ToastContext.Provider, { value: { showToast }, children: [
-    children,
-    /* @__PURE__ */ jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsx(
-      NotificationToast,
-      {
-        ...props,
-        onClose: () => {
-          setToasts((prev) => prev.filter((t) => t.id !== id));
-        }
-      },
-      id
-    )) })
-  ] });
-};
-export {
-  ToastContext,
-  ToastProvider as default
-};
+import{jsxs as p,jsx as a}from"react/jsx-runtime";import{createContext as u,useState as x,useCallback as h}from"react";import d from"./NotificationToast.js";import g from"./NotificationToast.module.scss.js";const b=u(null);let C=0;const v=({children:i})=>{const[o,s]=x([]),l=t=>{s(e=>{const n=t.max??1/0;if(e.length>=n)return e;const r=C++;return setTimeout(()=>{s(m=>m.filter(f=>f.id!==r))},t.timeout||4e3),[...e,{id:r,props:t}]})},c=h(()=>{if(o.length>0)switch(o[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{}}},[o.length]);return p(b.Provider,{value:{showToast:l},children:[i,a("div",{className:g.toastContainer,style:c(),children:o.map(({id:t,props:e})=>a(d,{...e,onClose:()=>{s(n=>n.filter(r=>r.id!==t))}},t))})]})};export{b as ToastContext,v as default};

package/dist/components/NotificationToast/NotificationToast.js

@@ -1,66 +1 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsx(
-    "div",
-    {
-      className: `${style.notificationToast} ${style[colorType]} ${filled ? style.filled : ""} ${style[animationClass]}`,
-      style: description ? { padding: "12px" } : {},
-      children: /* @__PURE__ */ jsxs("div", { className: style.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
-        /* @__PURE__ */ jsxs("div", { className: style.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
-          withInfoIcon && /* @__PURE__ */ jsx("div", { className: style.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsx(IconCheck, { color: filled ? "#328707" : "#fff" }) : /* @__PURE__ */ jsx(IconExclamation, { color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
-          /* @__PURE__ */ jsxs("div", { className: style.notificationToastContentLeftText, children: [
-            title && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentLeftTextTitle, children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentLeftTextDescription, children: description }),
-            children && children
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: style.notificationToastContentDescription }),
-        /* @__PURE__ */ jsxs("div", { className: style.notificationToastContentRight, children: [
-          customAction && customAction,
-          !description && withUndo && /* @__PURE__ */ jsx("p", { className: style.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
-          withClose && /* @__PURE__ */ jsx("div", { className: style.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsx(
-            IconCloseBlack,
-            {
-              color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
-            }
-          ) })
-        ] })
-      ] })
-    }
-  );
-};
-export {
-  NotificationToast as default
-};
+import{jsx as n,jsxs as i}from"react/jsx-runtime";import{IconCloseBlack as I}from"../../assets/Icons/IconClose.js";import t from"./NotificationToast.module.scss.js";import{useState as g,useEffect as F}from"react";import{IconExclamation as k}from"../../assets/Icons/IconExclamation.js";import{IconCheck as E}from"../../assets/Icons/IconCheck.js";const b=({title:f,colorType:a="neutral",filled:e=!1,withClose:m=!1,withUndo:c=!1,withInfoIcon:d=!0,description:o,customAction:l,timeout:u=4e3,children:r,onUndo:C,onClose:s})=>{const[T,h]=g("fadeIn");return F(()=>{const N=u,x=300,v=setTimeout(()=>{h("fadeOut"),setTimeout(()=>{s?.()},x)},N);return()=>{clearTimeout(v)}},[s]),n("div",{className:`${t.notificationToast} ${t[a]} ${e?t.filled:""} ${t[T]}`,style:o?{padding:"12px"}:{},children:i("div",{className:t.notificationToastContent,style:o?{alignItems:"flex-start"}:{},children:[i("div",{className:t.notificationToastContentLeft,style:o?{alignItems:"flex-start"}:{},children:[d&&n("div",{className:t.notificationToastContentInfoIcon,children:a==="success"?n(E,{color:e?"#328707":"#fff"}):n(k,{color:e?a==="neutral"?"#131314":a==="error"?"#E3292F":"#0058FF":"#fff"})}),i("div",{className:t.notificationToastContentLeftText,children:[f&&n("p",{className:t.notificationToastContentLeftTextTitle,children:f}),o&&n("p",{className:t.notificationToastContentLeftTextDescription,children:o}),r&&r]})]}),n("div",{className:t.notificationToastContentDescription}),i("div",{className:t.notificationToastContentRight,children:[l&&l,!o&&c&&n("p",{className:t.notificationToastContentRightUndoText,onClick:()=>C?.(),children:"Undo"}),m&&n("div",{className:t.notificationToastContentRightClose,style:o||!c?{border:"none"}:{},onClick:()=>s?.(),children:n(I,{color:e?a==="neutral"?"#131314":a==="error"?"#E3292F":a==="info"?"#0058FF":"#328707":"#fff"})})]})]})})};export{b as default};

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

@@ -1,59 +1 @@
-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
-};
+const t="NotificationToast-module__toastContainer",o="NotificationToast-module__notificationToast",n="NotificationToast-module__fadeIn",i="NotificationToast-module__fadeOut",a="NotificationToast-module__neutral",e="NotificationToast-module__filled",s="NotificationToast-module__notificationToastContentLeftTextTitle",c="NotificationToast-module__notificationToastContentRightUndoText",f="NotificationToast-module__notificationToastContentLeftTextDescription",T="NotificationToast-module__info",_="NotificationToast-module__error",l="NotificationToast-module__success",C="NotificationToast-module__notificationToastContent",d="NotificationToast-module__notificationToastContentLeft",u="NotificationToast-module__notificationToastContentInfoIcon",r="NotificationToast-module__notificationToastContentLeftText",m="NotificationToast-module__notificationToastContentRight",N="NotificationToast-module__notificationToastContentRightClose",x={toastContainer:t,notificationToast:o,fadeIn:n,fadeOut:i,neutral:a,filled:e,notificationToastContentLeftTextTitle:s,notificationToastContentRightUndoText:c,notificationToastContentLeftTextDescription:f,info:T,error:_,success:l,notificationToastContent:C,notificationToastContentLeft:d,notificationToastContentInfoIcon:u,notificationToastContentLeftText:r,notificationToastContentRight:m,notificationToastContentRightClose:N};export{x as default,_ as error,n as fadeIn,i as fadeOut,e as filled,T as info,a as neutral,o as notificationToast,C as notificationToastContent,u as notificationToastContentInfoIcon,d as notificationToastContentLeft,r as notificationToastContentLeftText,f as notificationToastContentLeftTextDescription,s as notificationToastContentLeftTextTitle,m as notificationToastContentRight,N as notificationToastContentRightClose,c as notificationToastContentRightUndoText,l as success,t as toastContainer};

package/dist/components/NotificationToast/createNotificationToast.js

@@ -1,10 +1 @@
-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
-};
+import{ToastContext as o}from"./NotificationContext.js";import{useContext as e}from"react";const s=()=>{const t=e(o);if(!t)throw new Error("createNotificationToast must be used within ToastProvider");return t.showToast};export{s as default};