import { ToastContainer as E } from "react-toastify";
export * from "react-toastify";
import { jsx as i } from "react/jsx-runtime";
import { CheckCircle as T, CloseCircle as I, InfoCircle as A, Forbidden as B, Close as O } from "@front.zen/icons";
import { styled as D, Box as _, outlinedInputClasses as e, autocompleteClasses as $, inputBaseClasses as M, chipClasses as R, alpha as S, typographyClasses as W, tabClasses as g, alertClasses as f, formLabelClasses as H, touchRippleClasses as v, stepConnectorClasses as s, stepLabelClasses as F, menuClasses as P, buttonBaseClasses as L, menuItemClasses as w, createTheme as N, IconButton as j } from "@mui/material";
import { mergeDeepRight as K } from "ramda";
import { blue as l, green as d, orange as p, red as c } from "@mui/material/colors";
import { Check as Y, KeyboardArrowDownRounded as X } from "@mui/icons-material";
import q from "@mui/icons-material/CloseRounded";
import G from "@mui/icons-material/KeyboardArrowDownRounded";
const J = ({ completed: o, active: r = !1, className: a }) => /* @__PURE__ */ i(Q, { active: r, className: a, children: o ? /* @__PURE__ */ i(Y, { className: "stepIcon-check" }) : /* @__PURE__ */ i(_, { className: "stepIcon-circle" }) }), Q = D(_, {
  shouldForwardProp: (o) => o !== "active"
})(({ theme: o, active: r }) => ({
  color: r ? o.palette.secondary.main : o.palette.grey[500],
  display: "flex",
  alignItems: "center",
  "& .stepIcon-check": {
    color: "#ffff",
    backgroundColor: o.palette.primary.main,
    width: 40,
    height: 40,
    padding: 8,
    borderRadius: "50%",
    zIndex: 1
  },
  "& .stepIcon-circle": {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: 40,
    height: 40,
    borderRadius: "50%",
    backgroundColor: "transparent",
    border: "2px solid currentColor",
    zIndex: 1,
    "&::after": {
      position: "absolute",
      content: '""',
      width: r ? 16 : 14,
      height: r ? 16 : 14,
      borderRadius: "50%",
      backgroundColor: "currentColor"
    }
  }
})), U = {
  styleOverrides: {
    tooltip: ({ theme: o, ownerState: r }) => ({
      backgroundColor: o.palette.primary[800],
      borderRadius: 6,
      padding: "4px 8px"
    }),
    arrow: ({ theme: o, ownerState: r }) => ({
      color: o.palette.primary[800]
    })
  }
}, k = {
  small: "8px",
  medium: "12px"
}, V = {
  styleOverrides: {
    root: ({ theme: o, ownerState: r }) => ({
      ...r.size === "small" ? o.typography.body2 : o.typography.body1,
      ...r.endAdornment && {
        paddingRight: o.spacing(2)
      },
      ...r.startAdornment && {
        paddingLeft: o.spacing(1)
      },
      backgroundColor: o.palette.common.white,
      [`& .${e.notchedOutline}`]: {
        borderColor: o.palette.grey[400],
        "& legend": {
          /**
           * Note: We shouldn't use lineHeight here because MUI sets the 'legend' height
           * when we have a label and doesn't set the height when we don't have label and use lineHeight for that.
           */
          fontSize: o.typography[r.size === "small" ? "caption" : "body2"].fontSize
        }
      },
      [`&:not(.${e.disabled}) &:hover .${e.notchedOutline}`]: {
        borderColor: o.palette.grey[500]
      },
      [`&.${e.disabled}`]: {
        backgroundColor: o.palette.grey[100],
        [`& .${e.notchedOutline}`]: {
          borderColor: o.palette.grey[300]
        }
      }
    }),
    focused: ({ ownerState: o, theme: r }) => ({
      [`& .${e.notchedOutline}`]: {
        borderColor: t(r, o, "main")
      }
    }),
    input: ({ ownerState: o, theme: r }) => ({
      height: "1.5rem",
      [`&.${e.disabled}`]: {
        WebkitTextFillColor: r.palette.grey[500],
        color: r.palette.grey[500]
      },
      ...!o.multiline && {
        padding: `${k[o.size || "medium"]} 14px`
      }
    }),
    error: ({ theme: o }) => ({
      [`&:is(:hover, .${e.focused}) .${e.notchedOutline}`]: {
        borderColor: o.palette.error.main
      }
    }),
    adornedStart: ({ theme: o }) => ({
      [`& .${e.input}`]: {
        paddingLeft: o.spacing(1)
      }
    }),
    adornedEnd: ({ theme: o }) => ({
      [`& .${e.input}`]: {
        paddingRight: o.spacing(1)
      }
    })
  }
}, Z = {
  defaultProps: {
    popupIcon: /* @__PURE__ */ i(X, {}),
    ChipProps: {
      size: "small"
    }
  },
  styleOverrides: {
    root: ({ theme: o }) => ({
      [`& .${e.root}`]: {
        paddingLeft: o.spacing(1),
        [`& .${$.input}`]: {
          padding: `calc(${k.medium} - 9px) 6px`
        },
        [`&.${M.sizeSmall} .${$.input}`]: {
          padding: `calc(${k.small} - ${o.spacing(0.75)}) 6px`
        }
      }
    }),
    tag: ({ theme: o }) => ({
      marginTop: o.spacing(0.25)
    }),
    paper: ({ theme: o }) => ({
      marginTop: o.spacing(0.5)
    }),
    option: ({ ownerState: o, theme: r }) => ({
      padding: r.spacing(0.5, 1),
      margin: r.spacing(1),
      color: r.palette.neutral[600],
      borderRadius: r.shape.borderRadius,
      [`&:is(&[aria-selected='true'], &.${$.focused})`]: {
        backgroundColor: r.palette.primary[100],
        color: r.palette.primary.main,
        "&:hover": {
          backgroundColor: r.palette.primary[200]
        }
      },
      ...o.size === "small" ? r.typography.body2 : r.typography.body1
    }),
    input: ({ ownerState: o, theme: r }) => ({
      ...o.size === "small" ? r.typography.body2 : r.typography.body1
    })
  }
}, oo = {
  defaultProps: {
    color: "primary",
    size: "small",
    deleteIcon: /* @__PURE__ */ i(q, {})
  },
  styleOverrides: {
    sizeSmall: {
      minHeight: 24
    },
    sizeMedium: {
      minHeight: 32
    },
    icon: {
      fontSize: "16px"
    },
    root: ({ theme: o, ownerState: r }) => ({
      paddingLeft: o.spacing(0.5),
      paddingRight: o.spacing(0.5),
      ...o.typography.caption,
      color: t(o, r, 600),
      [`&.${R.disabled}`]: { opacity: 0.5 }
    }),
    filled: ({ theme: o, ownerState: r }) => ({
      backgroundColor: t(o, r, 100),
      "&:hover": {
        backgroundColor: t(o, r, 200)
      }
    }),
    outlined: ({ theme: o, ownerState: r }) => ({
      borderWidth: "2px",
      borderColor: t(o, r, 200),
      "&:hover": {
        borderColor: t(o, r, 300),
        backgroundColor: t(o, r, 50)
      }
    }),
    deleteIcon: ({ theme: o, ownerState: r }) => {
      const a = t(o, r, 600);
      return {
        fontSize: "16px",
        color: S(a, 0.5),
        "&:hover": { color: a }
      };
    }
  }
}, ro = {
  styleOverrides: {
    root: ({ theme: o }) => ({
      margin: 0,
      color: o.palette.grey[500],
      [`& .${W.root}`]: {
        color: o.palette.grey[500]
      },
      [`.${e.root}.${e.disabled} &`]: {
        color: o.palette.grey[400]
      },
      [`.${e.error} &`]: {
        color: o.palette.error.main
      }
    })
  }
}, eo = {
  styleOverrides: {
    root: ({ theme: o, ownerState: r }) => ({
      fontSize: o.typography[r.size === "small" ? "body2" : "body1"].fontSize,
      transform: r.size === "small" ? "translate(14px, 10px) scale(1)" : "translate(14px, 12px) scale(1)"
    }),
    shrink: ({ theme: o, ownerState: r }) => ({
      // Change the transform value when the input is focused or filled
      transform: `translate(14px, ${r.size === "small" ? "-10px" : "-12px"}) scale(1)`,
      fontSize: o.typography[r.size === "small" ? "caption" : "body2"].fontSize
    })
  }
}, to = {
  defaultProps: {
    IconComponent: G
  },
  styleOverrides: {
    select: {
      height: "1.5rem",
      display: "flex",
      alignItems: "center"
    }
  }
}, io = {
  styleOverrides: {
    root: ({ theme: o }) => ({
      padding: "6px 16px",
      minHeight: "40px",
      color: o.palette.grey[500],
      ...o.typography.body1,
      [`&.${g.selected}`]: {
        ...o.typography.h5
      },
      [`&.${g.disabled}`]: {
        color: o.palette.grey[300]
      }
    }),
    textColorPrimary: ({ theme: o }) => ({
      [`&:not(.${g.selected}):hover`]: {
        color: o.palette.primary[400]
      }
    }),
    textColorSecondary: ({ theme: o }) => ({
      [`&:not(.${g.selected}):hover`]: {
        color: o.palette.secondary[400]
      }
    }),
    textColorInherit: {
      [`&:not(.${g.selected}):hover`]: {
        color: "inherit"
      }
    }
  }
}, ao = {
  styleOverrides: {
    root: {
      minHeight: "40px"
    },
    indicator: {
      height: "3px"
    }
  }
}, b = {
  50: "#EFF6FF",
  100: "#DBEAFE",
  200: "#BFDBFE",
  300: "#93C5FD",
  400: "#60A5FA",
  500: "#3B82F6",
  600: "#2563EB",
  700: "#1D4ED8",
  800: "#1E40AF",
  900: "#1E3A8A"
}, m = {
  50: "#F0FDF4",
  100: "#DCFCE7",
  200: "#BBF7D0",
  300: "#86EFAC",
  400: "#4ADE80",
  500: "#22C55E",
  600: "#16A34A",
  700: "#15803D",
  800: "#166534",
  900: "#14532D"
}, u = {
  50: "#F8FAFC",
  100: "#F1F5F9",
  200: "#E2E8F0",
  300: "#CBD5E1",
  400: "#94A3B8",
  500: "#64748B",
  600: "#475569",
  700: "#334155",
  800: "#1E293B",
  900: "#0F172A"
}, no = {
  50: "#F0F5FF",
  100: "#E5EDFF",
  200: "#CDDBFE",
  300: "#B4C6FC",
  400: "#8DA2FB",
  500: "#6875F5",
  600: "#5850EC",
  700: "#5145CD",
  800: "#42389D",
  900: "#362F78"
}, h = {
  50: "#FEFCE8",
  100: "#FEF3C7",
  200: "#FDE68A",
  300: "#FCD34D",
  400: "#FBBF24",
  500: "#F59E0B",
  600: "#D97706",
  700: "#B45309",
  800: "#92400E",
  900: "#78350F"
}, C = {
  50: "#FEF2F2",
  100: "#FEE2E2",
  200: "#FECACA",
  300: "#FCA5A5",
  400: "#F87171",
  500: "#EF4444",
  600: "#DC2626",
  700: "#B91C1C",
  800: "#991B1B",
  900: "#7F1D1D"
}, x = {
  50: "#FEFCE8",
  100: "#FEF9C3",
  200: "#FEF08A",
  300: "#FDE047",
  400: "#FACC15",
  500: "#EAB308",
  600: "#CA8A04",
  700: "#A16207",
  800: "#854D0E",
  900: "#713F12"
}, so = {
  grey: u,
  info: no,
  primary: {
    ...b,
    dark: b[600],
    main: b[500],
    light: b[400],
    contrastText: "#fff"
  },
  secondary: {
    ...h,
    dark: h[600],
    main: h[500],
    light: h[400],
    contrastText: "#fff"
  },
  neutral: {
    ...u,
    dark: u[600],
    main: u[500],
    light: u[400],
    contrastText: "#fff"
  },
  error: {
    ...C,
    dark: C[600],
    main: C[500],
    light: C[400],
    contrastText: "#fff"
  },
  warning: {
    ...x,
    dark: x[600],
    main: x[500],
    light: x[400],
    contrastText: "#fff"
  },
  success: {
    ...m,
    dark: m[600],
    main: m[500],
    light: m[400],
    contrastText: "#fff"
  }
}, lo = {
  fontFamily: "IRANYekanX, roboto",
  h1: {
    fontWeight: 800,
    fontSize: "2rem",
    // 32px
    lineHeight: 1.5
  },
  h2: {
    fontWeight: 800,
    fontSize: "1.5rem",
    // 24px
    lineHeight: 1.5
  },
  h3: {
    fontWeight: 700,
    fontSize: "1.25rem",
    // 20px
    lineHeight: 1.5
  },
  h4: {
    fontWeight: 500,
    fontSize: "1.125rem",
    // 18px
    lineHeight: 1.5
  },
  h5: {
    fontWeight: 700,
    fontSize: "1rem",
    // 16px
    lineHeight: 1.5
  },
  h6: {
    fontWeight: 700,
    fontSize: "0.875rem",
    // 14px
    lineHeight: 1.5
  },
  button: {
    fontWeight: 500,
    fontSize: "1rem",
    // 16px
    lineHeight: 1.25
  },
  body1: {
    fontWeight: 400,
    fontSize: "1rem",
    // 16px
    lineHeight: 1.75
  },
  body2: {
    fontWeight: 400,
    fontSize: "0.875rem",
    // 14px
    lineHeight: 1.75
  },
  caption: {
    fontWeight: 400,
    fontSize: "0.75rem",
    // 12px
    lineHeight: 1.5
  },
  overline: {
    fontWeight: 300,
    fontSize: "0.75rem",
    // 12px
    lineHeight: 1.5
  }
}, y = {
  default: /* @__PURE__ */ i(T, {}),
  success: /* @__PURE__ */ i(T, {}),
  error: /* @__PURE__ */ i(I, {}),
  info: /* @__PURE__ */ i(A, {}),
  warning: /* @__PURE__ */ i(B, {})
}, po = {
  palette: so,
  direction: "rtl",
  typography: lo,
  shape: {
    borderRadius: 12
  },
  components: {
    MuiTab: io,
    MuiTabs: ao,
    MuiChip: oo,
    MuiOutlinedInput: V,
    MuiAutocomplete: Z,
    MuiInputLabel: eo,
    MuiSelect: to,
    MuiInputAdornment: ro,
    MuiCssBaseline: {
      styleOverrides: (o) => `
      .Toastify__toast-container {
      }
  
      .Toastify__toast {
        padding: 0 6px 0 16px;
        border-radius: ${o.shape.borderRadius}px;
        min-width: 320px;
        box-shadow:${o.shadows[12]}
      }
  
      .Toastify__toast-body {
        font-size: ${o.typography.caption.fontSize};
        font-weight: ${o.typography.caption.fontWeight};
        font-family:${o.typography.fontFamily};
      }
     
      .Toastify__progress-bar {
      }
  
      .Toastify__close-button {
        color: ${o.palette.neutral[700]};
        padding-top:6px;
      }
  
      .Toastify__toast-icon {
        width:unset;
        padding : 8px;
        border-radius: 100%;
      }

      .Toastify__toast-container .Toastify__toast-theme--colored {
        color: ${o.palette.neutral[800]};
      }
  
      .Toastify__toast-theme--colored.Toastify__toast--info {
        background: ${l[100]};
        .Toastify__toast-icon {
          background : ${l[50]};
        }
      }
  
      .Toastify__toast-theme--colored.Toastify__toast--success {
        background: ${d[100]};
        .Toastify__toast-icon {
          background : ${d[50]};
        }
      }
  
      .Toastify__toast-theme--colored.Toastify__toast--warning {
        background: ${p[100]};
        .Toastify__toast-icon {
          background : ${p[50]};
        }
      }
  
      .Toastify__toast-theme--colored.Toastify__toast--error {
        background: ${c[100]};
        .Toastify__toast-icon {
          background : ${c[50]};
        }
      }
      `
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          marginLeft: "12px"
        }
      }
    },
    MuiAlert: {
      defaultProps: {
        iconMapping: {
          error: y.error,
          warning: y.warning,
          info: y.info,
          success: y.success
        }
      },
      styleOverrides: {
        root: {
          padding: "8px 16px"
        },
        icon: {
          padding: 0
        },
        message: {
          padding: 0
        },
        standardInfo: {
          background: l[50],
          border: `1px solid ${l[200]}`,
          color: l[900],
          [`& .${f.icon}`]: {
            color: l[900]
          }
        },
        standardSuccess: {
          background: d[50],
          border: `1px solid ${d[200]}`,
          color: d[900],
          [`& .${f.icon}`]: {
            color: d[900]
          }
        },
        standardWarning: {
          background: p[50],
          border: `1px solid ${p[200]}`,
          color: p[900],
          [`& .${f.icon}`]: {
            color: p[900]
          }
        },
        standardError: {
          background: c[50],
          border: `1px solid ${c[200]}`,
          color: c[900],
          [`& .${f.icon}`]: {
            color: c[900]
          }
        }
      }
    },
    MuiRadio: {
      styleOverrides: {
        root: ({ ownerState: o }) => ({
          "& .MuiSvgIcon-root": {
            fontSize: o.size === "small" ? 16 : 20
          }
        })
      }
    },
    MuiCheckbox: {
      defaultProps: {
        size: "small"
      }
    },
    MuiFormLabel: {
      styleOverrides: {
        root: ({ theme: o }) => ({
          fontSize: "0.875rem",
          [`&.${H.disabled}`]: {
            color: o.palette.neutral[400]
          }
        })
      }
    },
    MuiIconButton: {
      styleOverrides: {
        root: ({ theme: o, ownerState: r }) => ({
          borderRadius: o.shape.borderRadius,
          [`& .${v.root} .${v.child}`]: {
            borderRadius: o.shape.borderRadius
          },
          ...r.size === "small" && {
            padding: 4
          }
        })
      }
    },
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState: o, theme: r }) => ({
          ...r.typography.button,
          ...o.size === "small" && {
            ...r.typography.body2,
            height: 32
          },
          ...o.size === "medium" && {
            height: 40
          },
          ...o.size === "large" && {
            height: 48
          },
          // semiFill variant
          ...o.variant === "semiFill" && {
            backgroundColor: t(r, o, 100),
            color: t(r, o, 500),
            "&:hover": {
              backgroundColor: t(r, o, 200),
              color: t(r, o, 600)
            },
            "&:focus": {
              backgroundColor: t(r, o, 50),
              color: t(r, o, 400)
            },
            ...o.disabled && {
              backgroundColor: r.palette.grey[100],
              color: r.palette.grey[300]
            }
          }
        })
      }
    },
    MuiStepper: {
      defaultProps: { alternativeLabel: !0 },
      styleOverrides: {
        root: ({ theme: o, ownerState: r }) => ({
          [`& :nth-of-type(${(r.activeStep || 0) + 2})`]: {
            [`& .${s.line}`]: {
              borderImageSource: `linear-gradient(90deg, ${o.palette.grey[400]} 0%,  ${o.palette.secondary[500]} 100%)`
            }
          }
        })
      }
    },
    MuiStepConnector: {
      styleOverrides: {
        root: ({ theme: o }) => ({
          [`&.${s.alternativeLabel}`]: {
            top: 19
          },
          [`&.${s.active}`]: {
            [`& .${s.line}`]: {
              borderImageSource: `linear-gradient(90deg, ${o.palette.secondary[500]} 0%, ${o.palette.primary[500]} 100%);`
            }
          },
          [`&.${s.completed}`]: {
            [`& .${s.line}`]: {
              borderColor: o.palette.primary[500]
            }
          }
        }),
        line: () => ({
          borderRadius: 1,
          borderTopWidth: 2,
          borderImageSlice: 1
        })
      }
    },
    MuiStepLabel: {
      styleOverrides: {
        labelContainer: ({ theme: o }) => ({
          [`& .${F.label}`]: {
            [`&.${F.active}`]: {
              color: o.palette.secondary[500],
              fontWeight: o.typography.fontWeightBold
            },
            [`&.${F.completed}`]: {
              color: o.palette.primary[500]
            }
          }
        })
      },
      defaultProps: {
        StepIconComponent: J
      }
    },
    MuiTooltip: U,
    MuiList: {
      styleOverrides: {
        root: ({ theme: o }) => ({
          [`&.${P.list}`]: {
            padding: "12px 8px",
            [`& .${L.root}.${w.root}`]: {
              padding: "4px 8px",
              marginBottom: 4,
              color: o.palette.neutral[600],
              borderRadius: o.shape.borderRadius,
              ['&[aria-selected="true"]']: {
                background: o.palette.primary[50],
                color: o.palette.primary[500]
              }
            }
          }
        })
      }
    },
    MuiPaginationItem: {
      styleOverrides: {
        root: ({ theme: o }) => ({
          width: "32px",
          backgroundColor: o.palette.grey[100],
          borderRadius: o.spacing(1.5),
          "&:hover": {
            backgroundColor: o.palette.primary[100]
          },
          "&.Mui-selected , &.Mui-selected:hover": {
            backgroundColor: o.palette.primary[400],
            color: o.palette.common.white
          },
          "&.MuiPaginationItem-ellipsis": {
            backgroundColor: "inherit"
          }
        })
      }
    },
    MuiPopover: {
      styleOverrides: {
        paper: {
          marginTop: "4px"
        }
      }
    }
  }
};
function $o(o = {}, ...r) {
  const a = K(po, o), n = N(a, ...r);
  return n.shadows = co(n.shadows), n;
}
const co = (o) => Object.assign(o, {
  2: "0px 1px 2px 0px rgba(0,0,0,0.10)",
  // Raised
  8: "0px 4px 8px 0px rgba(0,0,0,0.10)",
  // Overlay
  12: "0px 6px 12px 0px rgba(0,0,0,0.10)",
  // Sticky Nav
  16: "0px 8px 16px 0px rgba(0,0,0,0.10)",
  // Temporary Nav
  24: "0px 12px 24px 0px rgba(0,0,0,0.10)"
  // Pop out
}), t = (o, r, a = "main") => {
  var z;
  const { color: n = "primary" } = r;
  return (z = o.palette) == null ? void 0 : z[n === "inherit" ? "primary" : n === "default" ? "neutral" : n][a];
}, Fo = (o) => /* @__PURE__ */ i(
  E,
  {
    icon: (r) => y[r.type],
    theme: "colored",
    rtl: !0,
    hideProgressBar: !0,
    position: "bottom-right",
    closeButton: (r) => /* @__PURE__ */ i("div", { className: "Toastify__close-button", children: /* @__PURE__ */ i(j, { size: "small", sx: { color: "inherit" }, onClick: r.closeToast, children: /* @__PURE__ */ i(O, {}) }) }),
    ...o
  }
);
export {
  Fo as ToastContainer,
  $o as createTheme,
  y as icons,
  so as palette
};
