const a = {
  /**
   * rhfUploadImageRoot: outer wrapper
   */
  rhfUploadImageRoot: ({ theme: e }) => ({
    width: "100%",
    display: "flex",
    flexDirection: "column",
    maxWidth: "100%",
    gap: e.vars.size.baseSpacings["sp0-5"],
    minWidth: "130px"
  }),
  /**
   * uploadImageRoot: dropzone outer border
   */
  uploadImageRoot: ({ theme: e, ownerState: i }) => ({
    padding: `${e.vars.size.baseSpacings.sp2}`,
    border: e.vars.size.borderStroke.container,
    borderRadius: e.vars.size.borderRadius.r1,
    borderColor: e.vars.palette.border.default,
    width: "100%",
    ...i?.isDragAccept && {
      borderColor: e.vars.palette.primary.main
    },
    ...i?.isDragReject && {
      borderColor: e.vars.palette.error.main
    },
    ...i?.error && {
      borderColor: e.vars.palette.error.main
    }
  }),
  /**
   * contentModuleLayout: inner content area
   */
  contentModuleLayout: ({ theme: e }) => ({
    padding: e.vars.size.baseSpacings["sp2-5"],
    background: e.vars.palette.background.neutral,
    borderRadius: e.vars.size.borderRadius["r0-5"],
    display: "flex",
    gap: e.vars.size.baseSpacings.sp4,
    flexDirection: "column",
    "&:hover": {
      button: {
        display: "flex !important"
      }
    }
  }),
  /**
   * contentImage: empty-state illustration column
   */
  contentImage: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    gap: e.vars.size.baseSpacings.sp2,
    width: "100%",
    maxWidth: "200px"
  }),
  /**
   * contentImageText: title stack under illustration
   */
  contentImageText: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * contentMessage: divider + helper text row
   */
  contentMessage: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    width: "100%",
    gap: e.vars.size.baseSpacings.sp2
  }),
  /**
   * typography: typography component
   */
  typography: ({ theme: e }) => ({
    color: e.vars.palette.text.secondary,
    width: "auto"
  }),
  /**
   * button: choose file trigger
   */
  button: () => ({
    width: "fit-content",
    alignSelf: "center",
    "& span": {
      cursor: "pointer"
    }
  }),
  /**
   * iconButtonRemove: remove preview (shown on hover)
   */
  iconButtonRemove: () => ({
    display: "none !important",
    position: "absolute",
    top: "7px",
    right: "7px",
    zIndex: 1
  }),
  divider: ({ theme: e }) => ({
    height: e.vars.size.borderStroke.container
  }),
  /**
   * containPreview: preview container and image (object-fit / height / max-height from ownerState)
   */
  containPreview: ({ ownerState: e }) => {
    const i = e?.maxHeight ?? e?.height, r = typeof i == "number" ? `${i}px` : i;
    return {
      position: "relative",
      display: "flex",
      width: "100%",
      "& img": {
        width: "100%",
        height: r ?? "auto",
        ...e?.imageFit !== null && { objectFit: e?.imageFit },
        ...r != null && {
          maxHeight: r
        }
      }
    };
  },
  /**
   * previewFallback: clear UI state when preview fails to load
   */
  previewFallback: ({ theme: e, ownerState: i }) => ({
    width: "100%",
    minHeight: i?.maxHeight !== null ? typeof i?.maxHeight == "number" ? `${i?.maxHeight}px` : i?.maxHeight : i?.height !== null ? typeof i?.height == "number" ? `${i?.height}px` : i?.height : "180px",
    border: e.vars.size.borderStroke.container,
    borderStyle: "dashed",
    borderColor: e.vars.palette.border.default,
    borderRadius: e.vars.size.borderRadius["r0-5"],
    background: e.vars.palette.background.default,
    color: e.vars.palette.text.secondary,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    gap: e.vars.size.baseSpacings.sp1,
    textAlign: "center",
    padding: e.vars.size.baseSpacings.sp2
  })
};
export {
  a as rhfUploadImageStyles
};
